/* ═══════════════════════════════════════════════════════
   Rioplastic — site institucional
   Editorial escuro · verde Rioplastic / índigo Rioplastic
   Display: Archivo · Body: Manrope · Labels: JetBrains Mono
   Anatomia herdada do modelo BRDevStudio; identidade Rioplastic.
   ═══════════════════════════════════════════════════════ */

:root {
  --radius:     22px;
  --radius-sm:  14px;
  --transition: 0.25s ease;

  --font-display: 'Archivo', 'Manrope', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ── DARK (padrão) ── */
body {
  --accent:        #14B85C;
  --on-accent:     #04220F;
  --accent-soft:   rgba(20, 184, 92, 0.09);
  --accent-border: rgba(20, 184, 92, 0.28);
  --accent-text:   #2FD97C;

  /* índigo da marca, clareado pro escuro */
  --brand2:        #7A6DF0;
  --brand2-soft:   rgba(122, 109, 240, 0.11);
  --brand2-border: rgba(122, 109, 240, 0.3);

  --bg:           #05070E;
  --bg2:          #0A0D17;
  --card:         #10131F;
  --card-border:  rgba(255,255,255,0.07);
  --text:         #EFF1F5;
  --text-muted:   #909AAF;
  --text-dim:     #7B8398;

  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 36px -14px rgba(0,0,0,0.65);
  --shadow-hover: 0 2px 4px rgba(0,0,0,0.45), 0 22px 48px -16px rgba(0,0,0,0.8);

  --subtle-bg:         rgba(255,255,255,0.05);
  --subtle-border:     rgba(255,255,255,0.1);
  --nav-scrolled-bg:   rgba(5,7,14,0.84);
  --nav-mobile-bg:     rgba(5,7,14,0.97);
  --chrome-bg:         #171B29;
  --chrome-url-bg:     rgba(255,255,255,0.06);
  --chrome-text:       #909AAF;

  --input-bg:     rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.14);
}

/* ── LIGHT ── */
body.light {
  --accent:        #0A7F30;
  --on-accent:     #FFFFFF;
  --accent-soft:   rgba(10, 127, 48, 0.09);
  --accent-border: rgba(10, 127, 48, 0.28);
  --accent-text:   #06682A;

  --brand2:        #312783;
  --brand2-soft:   rgba(49, 39, 131, 0.09);
  --brand2-border: rgba(49, 39, 131, 0.26);

  --bg:           #F4F6FA;
  --bg2:          #E9EDF4;
  --card:         #FFFFFF;
  --card-border:  rgba(11,17,32,0.09);
  --text:         #0B1120;
  --text-muted:   #55607A;
  --text-dim:     #69738C;

  --shadow: 0 1px 2px rgba(11,17,32,0.04), 0 10px 34px -14px rgba(11,17,32,0.14);
  --shadow-hover: 0 2px 4px rgba(11,17,32,0.05), 0 20px 44px -16px rgba(11,17,32,0.22);

  --subtle-bg:         rgba(11,17,32,0.04);
  --subtle-border:     rgba(11,17,32,0.12);
  --nav-scrolled-bg:   rgba(244,246,250,0.9);
  --nav-mobile-bg:     rgba(244,246,250,0.98);
  --chrome-bg:         #E2E7EF;
  --chrome-url-bg:     rgba(11,17,32,0.06);
  --chrome-text:       #55607A;

  --input-bg:     rgba(11,17,32,0.03);
  --input-border: rgba(11,17,32,0.16);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip corta a sobra do marquee (rotate + scale) sem criar
   um contexto de rolagem — o hidden do body é o fallback pra Safari antigo. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--bg); color: var(--text);
  line-height: 1.6; overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── i18n ── */
.lang-pt .en-only { display: none !important; }
.lang-en .pt-only { display: none !important; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* palavra de destaque: verde puro no escuro, marca-texto no claro */
.hl { color: var(--accent-text); }
body.light .hl {
  color: var(--on-accent);
  background: var(--accent);
  padding: 0 0.14em;
  border-radius: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── SECTION HEADER — editorial ── */
.section-tag {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.section-tag::after { content: ''; flex: 1; height: 1px; background: var(--subtle-border); }

.section-header { margin-bottom: 3.5rem; }
.section-header__row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem; align-items: end;
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 700; line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.section-header__row p { color: var(--text-muted); font-size: 1rem; max-width: 40ch; justify-self: end; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.9rem; border-radius: 999px;
  font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  border: none;
  max-width: 100%; overflow-wrap: anywhere; text-align: center;
}
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn--ghost {
  background: var(--nav-scrolled-bg); color: var(--text);
  border: 1px solid var(--subtle-border); font-weight: 600;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { border-color: var(--text); transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── NAV ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.2rem 0; transition: all 0.3s ease; }
.nav.scrolled {
  background: var(--nav-scrolled-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--subtle-border);
  padding: 0.7rem 0;
}
.nav__inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 50px; width: auto; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), height 0.3s ease; }
.nav.scrolled .nav__logo img { height: 40px; }
.nav__logo:hover img { transform: scale(1.05); }

.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a {
  font-family: var(--font-mono);
  color: var(--text); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a.active { color: var(--accent-text); }
.nav__cta {
  background: var(--accent);
  color: var(--on-accent) !important;
  font-weight: 700;
  padding: 0.55rem 1.3rem; border-radius: 999px;
  position: relative; overflow: hidden;
}
.nav__cta:hover { color: var(--on-accent) !important; }

.nav__controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.lang-toggle, .theme-toggle {
  background: transparent; border: 1px solid var(--subtle-border);
  color: var(--text-muted);
  border-radius: 999px; cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.lang-toggle { padding: 0.32rem 0.7rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; }
.theme-toggle { width: 34px; height: 34px; }
.lang-toggle:hover, .theme-toggle:hover { border-color: var(--text-muted); background: var(--subtle-bg); color: var(--text); }
.theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
body.light .theme-toggle .icon-sun  { display: none; }
body.light .theme-toggle .icon-moon { display: block; }

/* redes na nav: ícones puros à esquerda do EN, separados por uma divisória */
.nav__social { display: flex; align-items: center; gap: 0.1rem; }
.nav__social::after {
  content: ""; width: 1px; height: 18px; flex-shrink: 0;
  background: var(--subtle-border); margin-left: 0.5rem;
}
.nav__social a {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.nav__social a:hover { color: var(--accent-text); background: var(--accent-soft); }
.nav__social svg { width: 16px; height: 16px; fill: currentColor; }

.nav__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s; }

/* ── HERO ── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  padding: 8.5rem 0 3rem;
  overflow: hidden;
  background: #05070E;
}
.hero--short { min-height: 60svh; padding-bottom: 1rem; }

/* fundo: gradientes da marca + "teia de filme" que corre + rolos girando */
.hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; background:
  radial-gradient(85% 70% at 78% 8%, rgba(20,184,92,0.16) 0%, transparent 60%),
  radial-gradient(70% 65% at 12% 88%, rgba(49,39,131,0.32) 0%, transparent 58%),
  #05070E;
}
/* A tese do hero é o próprio material: uma bobina de filme correndo.
   Três camadas — a trama extrudada, as faixas do laminado e o brilho
   metalizado que varre a banda. */

/* 1. trama do filme soprado: linhas finas que descem devagar */
.hero__web {
  position: absolute; inset: -20% -10%;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(115deg, rgba(47,217,124,0.2) 0 2px, transparent 2px 190px);
  animation: webDrift 24s linear infinite;
  mask-image: radial-gradient(80% 80% at 62% 40%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 80% at 62% 40%, #000 0%, transparent 80%);
}
@keyframes webDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-52px, 94px, 0); } }

/* 2. faixas do laminado: PET · metalizado · PE, vistas de topo */
.hero__lam {
  position: absolute; inset: 0;
  background: linear-gradient(101deg,
    transparent 0 14%,
    rgba(122,109,240,0.10) 14% 23%,
    transparent 23% 38%,
    rgba(186,196,212,0.07) 38% 45%,
    transparent 45% 62%,
    rgba(20,184,92,0.09) 62% 74%,
    transparent 74%);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}

/* 3. o brilho que corre na bobina metalizada */
.hero__sheen {
  position: absolute; inset: -10% -40%;
  background: linear-gradient(101deg,
    transparent 38%,
    rgba(255,255,255,0.05) 46%,
    rgba(47,217,124,0.10) 50%,
    rgba(255,255,255,0.05) 54%,
    transparent 62%);
  animation: sheenSweep 11s cubic-bezier(0.5,0,0.5,1) infinite;
}
@keyframes sheenSweep {
  0%       { transform: translateX(-42%); opacity: 0; }
  12%, 58% { opacity: 1; }
  70%, 100%{ transform: translateX(42%); opacity: 0; }
}

/* rolos de filme: anéis concêntricos girando */
.hero__rolls { position: absolute; inset: 0; }
.hero__roll {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,0.045) 0 1px, transparent 1px 9px);
  animation: rollSpin 40s linear infinite;
}
.hero__roll--a { width: 520px; height: 520px; right: -120px; top: 4%; }
.hero__roll--b { width: 330px; height: 330px; right: 210px; bottom: 6%; animation-duration: 28s; animation-direction: reverse; border-color: rgba(20,184,92,0.16); }
.hero__roll--c { width: 190px; height: 190px; right: -40px; bottom: 22%; animation-duration: 34s; border-color: rgba(122,109,240,0.2); }
@keyframes rollSpin { to { transform: rotate(360deg); } }

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(5,7,14,0.76) 0%, rgba(5,7,14,0.5) 42%, rgba(5,7,14,0.16) 72%, rgba(5,7,14,0.04) 100%),
    linear-gradient(to bottom, rgba(5,7,14,0.34) 0%, rgba(5,7,14,0.12) 38%, rgba(5,7,14,0.52) 78%, #05070E 100%);
}

.hero__content { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; flex: 1; justify-content: center; }
.hero__content, .hero__content .hero__sub { color: #EFF1F5; }
.hero__badge, .hero__title, .hero__sub, .hero__stats {
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 4px 28px rgba(0,0,0,0.5);
}
.nav:not(.scrolled) .nav__links a:not(.nav__cta) {
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 2px 14px rgba(0,0,0,0.45);
}

/* nav sobre o hero escuro no tema claro: texto claro até rolar */
body.light .nav:not(.scrolled) .nav__links a:not(.nav__cta) { color: #EFF1F5; }
body.light .nav:not(.scrolled) .nav__links a:not(.nav__cta):hover,
body.light .nav:not(.scrolled) .nav__links a.active:not(.nav__cta) { color: #2FD97C; }
body.light .nav:not(.scrolled) .lang-toggle,
body.light .nav:not(.scrolled) .theme-toggle,
body.light .nav:not(.scrolled) .nav__social a { color: rgba(239,241,245,0.85); border-color: rgba(239,241,245,0.28); }
body.light .nav:not(.scrolled) .nav__social::after { background: rgba(239,241,245,0.28); }

.hero__badge {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #EFF1F5;
  margin-bottom: 2.2rem;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.6vw, 6.4rem);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 2.6rem;
  max-width: 16ch;
}
.hero--short .hero__title { font-size: clamp(2.3rem, 6vw, 4.6rem); margin-bottom: 1.4rem; max-width: 20ch; }
.hero__title-line { display: block; }
/* no hero (fundo escuro) o destaque é sempre verde puro, nos dois temas */
.hero .hl, body.light .hero .hl { color: #2FD97C; background: none; padding: 0; border-radius: 0; }

.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
  margin-bottom: 4rem;
}

/* ── BANNER DO HERO: as fotos das plantas, em carrossel full-bleed.
   Mesma anatomia do vídeo no modelo BRDGym. ── */
.hero__photos { position: absolute; inset: 0; }
.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
  transform: scale(1.06);
  animation: heroPan 18s ease-in-out infinite alternate;
}
.hero__photo.is-on { opacity: 1; }
@keyframes heroPan {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(-1.2%, -1%, 0); }
}

.hero__dots { display: flex; gap: 2px; margin-left: auto; align-self: center; }
.hero__dot {
  width: 22px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.hero__dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: rgba(239,241,245,0.34);
  transition: background 0.25s ease, width 0.25s ease;
}
.hero__dot[aria-current="true"]::before { background: #2FD97C; width: 20px; }
.hero__dot:hover::before { background: rgba(239,241,245,0.7); }
.hero__dot[aria-current="true"]:hover::before { background: #2FD97C; }

/* o palco claro: é assim que uma indústria de embalagem mostra mockup */
.showcase { position: relative; }
.showcase__stage {
  position: relative; aspect-ratio: 3 / 2;
  background: #fff; border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 34px 70px -24px rgba(0,0,0,0.85);
}
.showcase__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.8s ease;
}
.showcase__img.is-on { opacity: 1; }

/* faixa verde no topo do palco — amarra o palco branco à marca */
.showcase__stage::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #7A6DF0);
  z-index: 2;
}

.showcase__cap {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.45rem; margin-top: 1rem;
}
.showcase__seg {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  min-width: 0;
}
.showcase__seg b { color: var(--accent-text); font-weight: 500; }

.showcase__dots { display: flex; gap: 2px; flex-shrink: 0; }
.showcase__dot {
  width: 22px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.showcase__dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: var(--subtle-border);
  transition: background 0.25s ease, width 0.25s ease;
}
.showcase__dot[aria-current="true"]::before { background: var(--accent); width: 20px; }
.showcase__dot:hover::before { background: var(--text-muted); }
.showcase__dot[aria-current="true"]:hover::before { background: var(--accent); }

/* ── SEGMENTOS: chips à esquerda, mockups à direita ── */
.segments-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 3rem; align-items: start; }
@media (max-width: 900px) { .segments-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }
.hero__actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.hero__sub {
  font-size: 0.98rem; font-weight: 500;
  line-height: 1.7; max-width: 44ch;
  text-align: right;
}
.hero--short .hero__sub { text-align: left; margin-bottom: 2.2rem; }

.hero__stats {
  display: flex; align-items: stretch;
  border-top: 1px solid rgba(239,241,245,0.22);
  padding-top: 1.4rem;
}
.stat { flex: 0 0 auto; display: flex; align-items: baseline; gap: 0.6rem; }
.stat + .stat { margin-left: 3.2rem; }
.stat strong {
  font-family: var(--font-display);
  font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em;
  color: #2FD97C;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(239,241,245,0.75);
}

/* ── SEÇÕES GENÉRICAS ── */
.section { padding: 7.5rem 0; }
.section--alt { background: var(--bg2); }

/* ── CARDS ── */
/* min(Xpx, 100%) evita que a coluna mínima estoure a viewport no celular */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
.cards-grid--dense { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
/* duas colunas fixas: com auto-fit, quatro cards viravam 3 + 1 órfão */
.cards-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .cards-grid--2 { grid-template-columns: minmax(0, 1fr); } }

.feature-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 2.1rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  box-shadow: var(--shadow);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--accent-border); }

.feature-card__icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  color: var(--accent-text);
}
.feature-card__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.feature-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
.feature-card > p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.feature-card__list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 1.25rem; }
.feature-card__list li { font-size: 0.87rem; color: var(--text-muted); padding-left: 1.3rem; position: relative; }
.feature-card__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 0.65rem; height: 2px; background: var(--accent);
}
.feature-card__tag {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-accent); background: var(--accent);
  padding: 0.32rem 0.8rem; border-radius: 999px;
}
/* variante índigo pra alternar o ritmo das seções */
.feature-card--alt .feature-card__icon { background: var(--brand2-soft); border-color: var(--brand2-border); color: var(--brand2); }
.feature-card--alt .feature-card__list li::before { background: var(--brand2); }

/* ── CHIPS DE SEGMENTO ── */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 999px; padding: 0.55rem 1.05rem;
  transition: color var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.chip:hover { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft); transform: translateY(-2px); }

/* ── EXPLORADOR DE ESTRUTURAS (assinatura da página) ── */
.lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; }

/* a máscara no rodapé avisa que a lista rola */
.lab__list {
  display: flex; flex-direction: column; gap: 0.4rem;
  max-height: 430px; overflow-y: auto; padding-right: 0.4rem;
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.lab__list::-webkit-scrollbar { width: 6px; }
.lab__list::-webkit-scrollbar-thumb { background: var(--subtle-border); border-radius: 999px; }
.struct-btn {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem;
  color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.struct-btn i {
  font-family: var(--font-mono); font-style: normal;
  font-size: 0.65rem; color: var(--text-dim); flex-shrink: 0;
  width: 1.6rem;
}
.struct-btn:hover { color: var(--text); background: var(--subtle-bg); }
.struct-btn[aria-selected="true"] {
  color: var(--text); background: var(--accent-soft);
  border-color: var(--accent-border); font-weight: 700;
}
.struct-btn[aria-selected="true"] i { color: var(--accent-text); }

.lab__stage {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow); min-height: 430px;
  display: flex; flex-direction: column;
}
.lab__eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.5rem; }
.lab__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.4rem; min-height: 2.6rem; }
.lab__use { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.6rem; }

/* pilha de camadas */
.stack { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.6rem; }
.layer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: 10px; padding: 0.85rem 1.1rem;
  border: 1px solid var(--subtle-border);
  font-size: 0.82rem; font-weight: 600;
  transform-origin: left center;
  animation: layerIn 0.45s cubic-bezier(0.22,0.61,0.36,1) backwards;
}
.layer span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.layer--pet  { background: linear-gradient(100deg, rgba(122,109,240,0.22), rgba(122,109,240,0.06)); border-color: var(--brand2-border); }
.layer--bopp { background: linear-gradient(100deg, rgba(20,184,92,0.2), rgba(20,184,92,0.05)); border-color: var(--accent-border); }
.layer--pe   { background: linear-gradient(100deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); }
.layer--met  { background: linear-gradient(100deg, rgba(180,190,205,0.3), rgba(180,190,205,0.08)); border-color: rgba(180,190,205,0.35); }
body.light .layer--pe { background: linear-gradient(100deg, rgba(11,17,32,0.07), rgba(11,17,32,0.02)); }
body.light .layer--met { background: linear-gradient(100deg, rgba(90,105,125,0.28), rgba(90,105,125,0.08)); }
@keyframes layerIn { from { opacity: 0; transform: translateX(-14px) scaleX(0.96); } to { opacity: 1; transform: none; } }
.layer:nth-child(1) { animation-delay: 0.04s; }
.layer:nth-child(2) { animation-delay: 0.12s; }
.layer:nth-child(3) { animation-delay: 0.2s; }
.layer:nth-child(4) { animation-delay: 0.28s; }

.lab__props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: auto; }
.lab__prop {
  background: var(--subtle-bg); border: 1px solid var(--subtle-border);
  border-radius: 12px; padding: 0.7rem 0.8rem;
}
.lab__prop strong { display: block; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--accent-text); }
.lab__prop span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

/* ── PAINEL DE MÁQUINA / CONTADOR VIVO ── */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.25rem; }
.metric {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.metric__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.6rem; }
.metric__value { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1; }
.metric__unit { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-top: 0.5rem; display: block; }
.metric__bar { height: 4px; border-radius: 999px; background: var(--subtle-bg); margin-top: 1rem; overflow: hidden; }
.metric__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 1.2s cubic-bezier(0.22,0.61,0.36,1) 0.3s; }
.metric.visible .metric__bar i { width: var(--fill, 70%); }
html.flat body .metric__bar i { width: var(--fill, 70%); }

/* ── CERTIFICADOS ── */
.certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.25rem; }
.cert {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.7rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.cert:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-hover); }
.cert__seal {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  color: var(--accent-text); margin-bottom: 1rem;
}
.cert__seal svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cert strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
.cert p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }

/* ── UNIDADES / ENDEREÇOS ── */
.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1.25rem; }
.unit {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.unit:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-hover); }
.unit__tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 0.6rem; }
.unit strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.unit p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.65; }
.unit__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.8rem; font-weight: 700; color: var(--accent-text); }
.unit__link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.unit:hover .unit__link svg { transform: translate(2px,-2px); }

/* ── TIMELINE / PASSOS ── */
.steps { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
.step { display: grid; grid-template-columns: 76px 1fr; gap: 1.4rem; position: relative; padding-bottom: 2.4rem; }
.step::before {
  content: ''; position: absolute; left: 37px; top: 56px; bottom: 0;
  width: 2px; background: var(--subtle-border);
}
.step:last-child { padding-bottom: 0; }
.step:last-child::before { display: none; }
.step__num {
  width: 76px; height: 56px; border-radius: 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.step h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.55rem 0 0.4rem; }
.step p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.75; max-width: 60ch; }
.step p strong { color: var(--text); font-weight: 700; }

.note-card {
  display: flex; align-items: flex-start; gap: 0.9rem;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm); padding: 1.1rem 1.3rem;
  font-size: 0.9rem; color: var(--text); max-width: 780px;
  margin-top: 2.5rem;
}
.note-card svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--accent-text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.note-card p { color: var(--text-muted); line-height: 1.7; }
.note-card strong { color: var(--text); }

/* ── VALORES ── */
/* seis valores: 3×2 fecha melhor que a fila de cinco + um órfão */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .values { grid-template-columns: minmax(0, 1fr); } }
.value {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition), border-color var(--transition);
}
.value:hover { transform: translateY(-3px); border-color: var(--accent-border); }
.value strong { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin-bottom: 0.3rem; }
.value p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.value__n { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--accent-text); display: block; margin-bottom: 0.7rem; }

/* ── CONTATO ── */
/* minmax(0, …) impede que e-mails longos estiquem a coluna */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
.contact-intro > p { color: var(--text-muted); margin-bottom: 2rem; line-height: 1.75; max-width: 46ch; }
.contact-channels { display: flex; flex-direction: column; gap: 0.75rem; }
.contact-channel {
  display: flex; align-items: center; gap: 1rem;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 1rem 1.25rem;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow);
}
.contact-channel:hover { border-color: var(--accent-border); transform: translateX(4px); box-shadow: var(--shadow-hover); }
.contact-channel__icon { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--accent-text); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-channel div { flex: 1; min-width: 0; }
.contact-channel strong { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
.contact-channel span { font-size: 0.8rem; color: var(--text-muted); }
.contact-channel__arrow { color: var(--accent-text); font-size: 1.1rem; transition: transform var(--transition); }
.contact-channel:hover .contact-channel__arrow { transform: translateX(4px); }

.contact-form {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 2.25rem;
  box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); margin-bottom: 0.5rem;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--radius-sm); padding: 0.8rem 1.05rem; color: var(--text);
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none; appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); }
.form-group select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1.1rem center, right 0.75rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.form-group select option { background: var(--card); color: var(--text); }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-actions { display: flex; flex-direction: column; gap: 0.7rem; }
.form-actions .btn { width: 100%; justify-content: center; }
.form-note { text-align: center; font-size: 0.76rem; color: var(--text-dim); margin-top: 0.85rem; }

/* ── ACESSO RESTRITO ── */
.portals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; }
.portal {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.portal:hover { transform: translateY(-3px); border-color: var(--brand2-border); box-shadow: var(--shadow-hover); }
.portal__icon { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--brand2); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portal div { flex: 1; min-width: 0; }
.portal strong { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
.portal span { overflow-wrap: anywhere; }
.portal span { font-size: 0.76rem; color: var(--text-muted); }
.portal__arrow { color: var(--brand2); font-size: 1rem; transition: transform var(--transition); }
.portal:hover .portal__arrow { transform: translate(3px,-3px); }

/* ── FAIXA CTA ── */
.cta-band { padding: 7.5rem 0; }
.cta-band__box {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 4rem 2.5rem;
  text-align: center; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.cta-band__box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 50% 0%, var(--accent-soft) 0%, transparent 70%);
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.06;
  margin-bottom: 1rem; position: relative;
}
.cta-band p { color: var(--text-muted); max-width: 54ch; margin: 0 auto 2.2rem; position: relative; }
.cta-band__actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; position: relative; }

/* ── CRÉDITO BRDEV ── */
.studio-strip { border-top: 1px solid var(--subtle-border); }
.studio-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; padding: 3.5rem 0;
}
.studio-strip__text .eyebrow {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
  display: block; margin-bottom: 0.5rem;
}
.studio-strip__text strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.studio-strip__text p { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.3rem; max-width: 60ch; }
.studio-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  border: 1px solid var(--subtle-border);
  padding: 0.6rem 1.3rem; border-radius: 999px;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.studio-link:hover { border-color: var(--text); background: var(--subtle-bg); transform: translateY(-2px); }
.studio-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── FOOTER ── */
.footer { background: var(--bg); border-top: 1px solid var(--subtle-border); padding: 4.5rem 0 2rem; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer__brand img { height: 46px; width: auto; }
.footer__brand p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; margin-top: 1rem; max-width: 300px; }
.footer__social { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--subtle-border); color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}
.footer__social a:hover { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); transform: translateY(-2px); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__links h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-dim); margin-bottom: 1.1rem;
}
.footer__links a, .footer__links p { display: block; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.6rem; transition: color var(--transition), transform var(--transition); }
.footer__links a:hover { color: var(--text); transform: translateX(4px); }
.footer__bottom { border-top: 1px solid var(--subtle-border); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__bottom p, .footer__bottom a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--text-dim); }
.footer__bottom a:hover { color: var(--accent-text); }

/* ── MODO FLAT (?flat — screenshots/testes) ── */
html.flat { scroll-behavior: auto; }
html.flat body .hero { min-height: auto; padding-top: 8rem; }
html.flat body *, html.flat body *::before, html.flat body *::after { transition: none !important; animation: none !important; }
html.flat body .reveal { opacity: 1; transform: none; }
html.flat body .hero__badge, html.flat body .hero__title-line,
html.flat body .hero__foot, html.flat body .hero__stats { opacity: 1; }

/* ── REVEAL ──
   Só esconde quando o JS confirmou que está vivo (html.js). Sem JS,
   ou se o script falhar, a página aparece inteira em vez de sumir. */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1) var(--rd, 0s), transform 0.6s cubic-bezier(0.22,0.61,0.36,1) var(--rd, 0s); }
html.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════
   MICRO-INTERAÇÕES
   ═══════════════════════════════════════════════════════ */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero__badge, .hero__title-line, .hero__foot, .hero__stats {
  opacity: 0;
  animation: riseIn 0.75s cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.hero__badge { animation-delay: 0.12s; }
.hero__title-line:nth-child(1) { animation-delay: 0.26s; }
.hero__title-line:nth-child(2) { animation-delay: 0.4s; }
.hero__foot { animation-delay: 0.58s; }
.hero__stats { animation-delay: 0.74s; }

/* ── Marquee de segmentos ── */
.marquee {
  background: var(--accent); color: var(--on-accent);
  overflow: hidden; white-space: nowrap;
  transform: rotate(-1.2deg) scale(1.03);
  padding: 0.85rem 0;
  position: relative; z-index: 3;
  margin-top: -1.4rem;
}
.marquee__track { display: inline-flex; animation: marqueeSlide 38s linear infinite; }
.marquee__track span {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.14em;
  padding-right: 0.5rem;
}
@keyframes marqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Section tag: a linha se desenha ── */
.section-tag::after { transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.2s; }
.section-header.visible .section-tag::after { transform: scaleX(1); }
html.flat body .section-tag::after { transform: scaleX(1); }

/* ── Marca-texto varre da esquerda (tema claro) ── */
body.light .hl {
  background: linear-gradient(var(--accent), var(--accent)) left center / 100% 100% no-repeat;
}
body.light .section-header .hl {
  background-size: 0% 100%;
  transition: background-size 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.4s;
}
body.light .section-header.visible .hl,
html.flat body.light .section-header .hl { background-size: 100% 100%; }

/* ── Botões: brilho que varre + seta que desliza ── */
.btn { position: relative; overflow: hidden; }
.btn--primary::before, .nav__cta::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 36%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-130%) skewX(-18deg);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.btn--primary:hover::before, .nav__cta:hover::before { transform: translateX(320%) skewX(-18deg); }
.btn svg { transition: transform 0.25s ease; }
.btn:hover svg { transform: translateX(3px); }
.studio-link svg { transition: transform 0.25s ease; }
.studio-link:hover svg { transform: translate(2px, -2px); }

/* ── Nav: sublinhado animado ── */
.nav__links a:not(.nav__cta) { position: relative; }
.nav__links a:not(.nav__cta)::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 2px; background: var(--accent-text);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.active:not(.nav__cta)::after { transform: scaleX(1); }

/* ── Cards: spotlight que segue o mouse + ícone que acende ── */
.feature-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%);
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.feature-card:hover::after { opacity: 1; }
.feature-card__icon { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.feature-card:hover .feature-card__icon {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  transform: rotate(-5deg) scale(1.06);
}
.feature-card--alt:hover .feature-card__icon { background: var(--brand2); border-color: var(--brand2); color: #fff; }

/* numeração editorial nos grids densos */
.cards-grid--dense { counter-reset: feat; }
.cards-grid--dense .feature-card::before {
  counter-increment: feat;
  content: counter(feat, decimal-leading-zero);
  position: absolute; top: 1.5rem; right: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em;
  color: var(--text-dim);
  transition: color 0.3s ease;
}
.cards-grid--dense .feature-card:hover::before { color: var(--accent-text); }

/* ── Timeline: a linha se desenha, o marco pinta ── */
.step::before { transform: scaleY(0); transform-origin: top; transition: transform 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.25s; }
.step.visible::before, html.flat body .step::before { transform: scaleY(1); }
.step__num { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.step:hover .step__num {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  transform: scale(1.05);
}

/* ── CTA: glow que respira ── */
@keyframes ctaBreath {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.14); }
}
.cta-band__box::before { animation: ctaBreath 4.5s ease-in-out infinite alternate; }

/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
  .nav__links { gap: 1.1rem; }
  .nav__links a { font-size: 0.68rem; letter-spacing: 0.1em; }
  .nav__social a { width: 26px; height: 26px; }
  .nav__social svg { width: 15px; height: 15px; }
  .nav__social::after { margin-left: 0.35rem; }
  .lab { grid-template-columns: minmax(0, 1fr); }
  .lab__list {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    max-height: none; padding-bottom: 0.5rem;
    mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
  }
  .struct-btn { white-space: nowrap; flex-shrink: 0; border: 1px solid var(--subtle-border); }
}

@media (max-width: 900px) {
  .section-header__row { grid-template-columns: 1fr; align-items: start; }
  .section-header__row p { justify-self: start; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
  .hero__sub { text-align: left; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__links.open {
    display: flex; flex-direction: column; position: fixed; inset: 0; top: 64px;
    background: var(--nav-mobile-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 2.5rem 1.5rem; gap: 1.4rem; align-items: center; justify-content: flex-start; z-index: 99;
    overflow-y: auto;
  }
  .nav__links.open a { font-size: 0.95rem; padding: 0.5rem 0; color: var(--text) !important; }
  .nav__links.open .nav__cta { color: var(--on-accent) !important; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 560px) {
  .showcase__seg { font-size: 0.63rem; letter-spacing: 0.1em; }
  .showcase__dot { height: 34px; }
  /* barra estreita demais para logo + redes + idioma + tema + menu: redes só no rodapé */
  .nav__social { display: none; }
}

@media (max-width: 860px) {
  /* sem a vinheta lateral, o texto cai sobre a parte clara da foto */
  .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(5,7,14,0.5) 0%, rgba(5,7,14,0.42) 38%, rgba(5,7,14,0.7) 78%, #05070E 100%);
  }
}

@media (max-width: 640px) {
  .hero { padding-top: 7rem; }
  .hero__badge { font-size: 0.6rem; letter-spacing: 0.12em; }
  .hero__title { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .hero__foot { flex-direction: column; align-items: stretch; margin-bottom: 3rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .hero__stats { flex-wrap: wrap; gap: 1.1rem 0; }
  .stat { flex-direction: column; align-items: flex-start; gap: 0.1rem; flex: 1 1 45%; }
  .stat + .stat { margin-left: 0; }
  .hero__roll--a { width: 340px; height: 340px; right: -140px; }
  .hero__roll--b, .hero__roll--c { display: none; }

  .section { padding: 5rem 0; }
  .cta-band { padding: 5rem 0; }
  .cta-band__box { padding: 3rem 1.5rem; }
  .contact-form { padding: 1.5rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .lab__stage { padding: 1.4rem; min-height: 0; }
  .lab__props { grid-template-columns: 1fr; }
  .step { grid-template-columns: 62px 1fr; gap: 1rem; }
  .step__num { width: 62px; height: 48px; font-size: 0.92rem; border-radius: 14px; }
  .step::before { left: 30px; top: 48px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__brand { grid-column: span 1; }
  .marquee__track span { font-size: 0.8rem; }
}