/* ═══════════════════════════════════════════════════════════════════════════
   Tech Swell — Landing Page
   Fiel ao Figma "ÓLUX_estratégiaDeMarca › Landing Page UI"
     · Layout Mobile (node 4582:3121) —  414 × 5191   ← BASE
     · Layout Desk   (node 4579:2408) — 1276 × 3871   ← min-width: 900px

   Arquitetura MOBILE-FIRST: o estilo base é o do mobile e escala para cima.
   Breakpoints:  base → 600px (tablet) → 900px (desktop) → 1276px (design)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #261c3d;   /* roxo-escuro institucional          */
  --mint:       #30ffd0;   /* verde-menta accent                 */
  --black:      #040608;   /* preto das sobreposições soft-light */
  --white:      #ffffff;

  --line:       rgba(38, 28, 61, .4);
  --line-light: rgba(255, 255, 255, .4);

  --glass-bg:   rgba(255, 255, 255, .6);
  --glass-blur: 5px;

  --page: 1276px;                    /* prancheta desktop      */
  --gut:  clamp(20px, 6.3vw, 26px);  /* margem lateral mobile  */
  --radius: 10px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* tipografia — valores extraídos do .fig (nó a nó), mobile → desktop
     H1 26px→36px · KPI 36px→54px · H2 grandes 24px→36px, todos line-height 36px */
  --fs-h1:    clamp(26px, 3.4vw, 36px);
  --lh-h1:    36px;
  --fs-h2:    24px;
  --fs-h2-lg: clamp(24px, 3.2vw, 36px);
  --fs-kpi:   clamp(36px, 5.2vw, 54px);
  --fs-body:  16px;
  --lh-body:  16px;   /* valor do Figma */
}

/* ───────────────────────────────── reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
}

.rule { display: block; height: 1px; background: var(--line); }
.dark-band .rule { background: var(--line-light); }

/* ── carrosséis: arrastar com mouse e com o dedo ──
   Sem isto o navegador inicia o "drag nativo" da imagem e cancela o gesto. */
.segments__viewport,
.solutions__viewport,
.benefits__rail {
  cursor: grab;
  touch-action: pan-y pinch-zoom;   /* solta o scroll vertical, captura o horizontal */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.segments__viewport:active,
.solutions__viewport:active,
.benefits__rail:active { cursor: grabbing; }

.segments__viewport img,
.solutions__viewport img,
.benefits__rail img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
}

/* os controles seguem clicáveis normalmente */
.seg-nav, .round-btn, .solutions__nav button { cursor: pointer; }
.segments__viewport a, .solutions__viewport a { cursor: pointer; }

/* utilitários de visibilidade — SEM !important, para não sequestrar o `display`
   de quem precisa de flex/grid quando visível (ver .benefits__inner) */
.only-desk { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════ */
/* full-bleed: a foto acompanha a largura da tela (mantendo a margem de 4px e o
   raio de 10px do cartão original); o conteúdo fica travado no container */
.hero {
  position: relative;
  height: 536px;
  width: 100%;
  background: var(--white);
}

.hero__frame {
  position: absolute;
  inset: 4px 6px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__img--desk { display: none; }

/* sobreposições soft-light — mobile: metade inferior */
.hero__frame .shade {
  position: absolute;
  inset: 50% 0 0 0;
  background: var(--black);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.hero__frame .shade--grad  { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--ink) 100%); }
.hero__frame .shade--grad2 { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--ink) 90%); }
.hero__frame .hairline {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px; background: var(--white);
}

/* ── header ── */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px var(--gut);
  max-width: var(--page);
  margin-inline: auto;
}

.logo { display: flex; align-items: center; gap: 8px; }
.logo__icon { position: relative; display: block; width: 53.558px; height: 54px; flex: none; }
.logo__icon img { width: 100%; height: 100%; }
.logo__stripe {
  position: absolute;
  left: 13.71px; top: 22.3px;
  width: 26.866px; height: 9.403px;
  background: var(--mint);
}
.logo__type { width: 107.88px; height: 23.309px; flex: none; }

.main-nav { display: none; }

.nav-toggle {
  display: grid; place-items: center;
  width: 54px; height: 54px; flex: none;
  transition: transform .3s var(--ease);
}
.nav-toggle:hover { transform: scale(1.06); }

/* ── copy do hero ──
   No mobile o bloco é ancorado na base do frame e flui naturalmente: assim o
   título pode quebrar em 3 ou 4 linhas sem colidir com o parágrafo. */
.hero__body { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero__body .wrap {
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 76px;
}

.hero__title {
  max-width: 362px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 900;
  color: var(--white);
  text-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

.hero__card {
  margin-top: 8px;
  max-width: 370px;
  pointer-events: auto;
}
.hero__card p {
  font-size: var(--fs-body); line-height: 20px; font-weight: 500;
  color: var(--white);
  text-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 9px;
  padding: 16px;
  color: var(--ink);
}

/* ── menu mobile ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mobile-menu a { color: var(--white); font-size: 24px; line-height: 28px; font-weight: 800; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--mint); }
.mobile-menu__close {
  position: absolute; top: 16px; right: 24px;
  width: 44px; height: 44px;
  font-size: 40px; line-height: 1; color: var(--white);
}

/* ════════════════════════════════════════════════════════════════════════
   BENEFÍCIOS
   ════════════════════════════════════════════════════════════════════════ */
.benefits { padding: 60px 0; background: var(--white); }
.benefits__title { font-size: var(--fs-h2); line-height: 24px; font-weight: 900; max-width: 362px; }

/* mobile → trilho horizontal */
.benefits__rail { margin-top: 32px; overflow: hidden; }
.benefits__rail-track { display: flex; gap: 32px; padding-top: 4px; }
.benefits__rail .benefit { flex: 0 0 260px; min-width: 0; }

.benefit__head { display: flex; gap: 8px; align-items: flex-start; }
.benefit__icon { width: 32px; height: 32px; flex: 0 0 32px; }
.benefit h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 800; }
.benefit p { margin-top: 10px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════════
   BANDA ESCURA — escala + segmentos + faq
   ════════════════════════════════════════════════════════════════════════ */
.dark-band { background: var(--ink); color: var(--white); }

.scale { padding-top: 60px; }
.scale__copy h2 { font-size: var(--fs-h2); line-height: 24px; font-weight: 900; }
.scale__lead { margin-top: 12px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; }
.scale__text { margin-top: 12px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }

.kpis {
  margin-top: 23px; padding-top: 23px;
  border-top: 1px solid var(--line-light);
  display: flex; flex-direction: column; gap: 10px;
}
.kpi { display: flex; align-items: flex-end; gap: 4px; }
.kpi__num {
  font-size: var(--fs-kpi);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpi__label { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; padding-bottom: 4px; }

.dark-band > .wrap > .rule { margin-top: 23px; }

/* ── card verde (aplicações) ── */
.segments { padding-top: 57px; }

/* no mobile a foto vem primeiro e o texto embaixo, como no Layout Mobile.
   O card tem 402px numa tela de 414 (6px de cada lado) — precisa escapar do
   padding do .wrap, senão o título quebra em 2 linhas e cruza o traço branco. */
.segments__card {
  position: relative;
  background: var(--mint);
  border-radius: var(--radius);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-inline: calc(6px - var(--gut));
}
.segments__media { order: -1; }

.segments__media {
  position: relative;
  margin: 6px 6px 0;
  height: 420px;
  border-radius: 6px;
  overflow: hidden;
}
.segments__viewport { overflow: hidden; height: 100%; }
.segments__track { display: flex; height: 100%; }

.seg-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.seg-slide > img { width: 100%; height: 100%; object-fit: cover; }
.seg-slide .shade {
  position: absolute; inset: auto 0 0 0; height: 58%;
  background: var(--black); mix-blend-mode: soft-light; pointer-events: none;
}
.seg-slide .shade--grad {
  inset: auto 0 0 0; height: 58%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--ink) 100%);
  mix-blend-mode: normal; opacity: .55;
}
.seg-slide .hairline { display: none; }   /* no mobile o traço vira ::before da legenda */
.seg-slide figcaption::before,
.prod__glass::before {
  content: ''; position: absolute;
  left: -14px; right: -14px; top: -13px;
  height: 1px; background: var(--white);
}

/* legenda: no mobile é título branco sobre a foto */
.seg-slide figcaption {
  position: absolute;
  left: 14px; right: 14px; bottom: 36px;   /* Figma mobile: texto 362px, acaba em y=384 de 420 */
  z-index: 2;
  display: flex; flex-direction: column;
  color: var(--white);
}
.seg-slide figcaption strong {
  font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 900;
  text-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.seg-slide figcaption span { margin-top: 4px; font-size: var(--fs-body); line-height: 20px; font-weight: 500; }

.segments__copy { padding: 30px 20px 34px; }
.segments__copy h2 { font-size: var(--fs-h2-lg); line-height: 1; font-weight: 900; }

.steps { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.steps__n { display: block; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; }
.steps__row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }
.steps__row img { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }


.seg-nav { position: absolute; top: 20px; right: 20px; display: flex; gap: 8px; z-index: 3; }
.round-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.round-btn img { width: 12px; height: 12px; }
/* a seta "anterior" é a mesma arte girada 180°, como no Figma */
.round-btn[data-embla-prev] img { transform: rotate(180deg); }
.round-btn:hover { transform: scale(1.08); }
.round-btn:disabled { opacity: .35; cursor: default; transform: none; }

/* ── faq ── */
.faq { padding: 23px 0 60px; }
.faq__grid { position: relative; display: grid; gap: 20px; }
.faq__intro h2 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 900; }
.faq__intro p { margin-top: 4px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }

.faq__list { display: flex; flex-direction: column; }
.qa__q {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px;
  padding: 0 0 8px;
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q img { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.qa[open] .qa__q img { transform: rotate(45deg); }

.qa__body { overflow: hidden; }
.qa__body p {
  padding-top: 10px;
  font-size: var(--fs-body); line-height: 20px; font-weight: 500;
  color: rgba(255, 255, 255, .82);
}

/* ════════════════════════════════════════════════════════════════════════
   SOLUÇÕES — carrossel de produtos
   ════════════════════════════════════════════════════════════════════════ */
.solutions { padding-top: 61px; background: var(--white); }
.solutions__head h2 { font-size: var(--fs-h2); line-height: 24px; font-weight: 900; max-width: 362px; }
.solutions__nav { display: none; }

.solutions__rail { margin-top: 32px; position: relative; max-width: var(--page); margin-inline: auto; }
.solutions__viewport { overflow: hidden; }
.solutions__track { display: flex; gap: 12px; padding-inline: 6px; }

.prod {
  flex: 0 0 calc(100vw - 12px);   /* Figma mobile: card de 402px numa tela de 414 */
  max-width: 402px;
  min-width: 0;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}

.prod__media { position: relative; margin: 10px 6px 0; height: 420px; border-radius: 6px; overflow: hidden; }
.prod__media > img { width: 100%; height: 100%; object-fit: cover; }
/* Sem véu sobre a foto: os PDFs do Carrossel 2 mostram a imagem limpa nos dois
   breakpoints — o fundo cinza mede rgb(221) acima e abaixo da legenda. */

.prod__glass {
  position: absolute; left: 14px; right: 14px; bottom: 36px;
  z-index: 2;
  display: flex; flex-direction: column;
  color: var(--white);
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; border-radius: 0;
}
.prod__glass strong {
  font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 900;
  text-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.prod__glass span { margin-top: 4px; font-size: var(--fs-body); line-height: 20px; font-weight: 500; }

.prod__list { padding: 40px 20px; display: flex; flex-direction: column; gap: 10px; }  /* Figma: lista em y=470, card 790px */
.prod__list li { color: var(--white); font-size: var(--fs-body); line-height: var(--lh-body); }
.prod__list strong { display: block; font-weight: 600; }
.prod__list span { display: block; font-weight: 500; }

.seg-nav--mob { position: absolute; top: 26px; right: calc(var(--gut) + 6px); }

/* ── botões de loja (só no slide PHI) ── */
.store-links {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 3;
  display: flex; gap: 8px;
}
.store-links a {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.store-links img { width: 21px; height: 23px; }
.store-links a:hover { transform: scale(1.08); background: #372a58; }

/* ── mockup do iPhone (slide PHI) ── */
.prod__media--phone { background: #d7f7ff; display: flex; justify-content: center; align-items: flex-end; }
.phone {
  position: relative;
  width: 240px; height: 498px;
  flex: none;
  margin-bottom: -170px;
  border: 3.4px solid #363135;
  border-radius: 38px;
  background: #d7f7ff;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(4, 6, 8, .35);
}
.phone__screen {
  position: absolute; inset: 2px;
  border-radius: 35px; overflow: hidden;
  background: #d7f7ff;
  display: flex; flex-direction: column;
}
.phone__island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 21px; border-radius: 11px; background: #000;
}
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 0;
  font-size: 8px; font-weight: 600; color: #010101;
}
.phone__icons { display: flex; align-items: center; gap: 3px; }
.phone__icons .sig { display: flex; align-items: flex-end; gap: 1px; height: 8px; }
.phone__icons .sig b { width: 2px; background: #010101; border-radius: .5px; }
.phone__icons .sig b:nth-child(1) { height: 3px; }
.phone__icons .sig b:nth-child(2) { height: 4.5px; }
.phone__icons .sig b:nth-child(3) { height: 6px; }
.phone__icons .sig b:nth-child(4) { height: 8px; }
.phone__icons .wifi {
  width: 9px; height: 7px;
  border: 1.6px solid #010101; border-bottom: 0; border-radius: 9px 9px 0 0;
}
.phone__icons .batt {
  width: 15px; height: 8px;
  border: 1px solid rgba(1,1,1,.5); border-radius: 2.5px;
  background: linear-gradient(90deg, #010101 90%, transparent 90%) no-repeat;
  background-size: 100% 100%; background-clip: content-box;
  padding: 1px;
}
.phone__apps { padding: 22px 22px 0; }
.phone__apps img { width: 42px; height: 42px; border-radius: 11px; }
.phone__bottom { margin-top: auto; padding: 0 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phone__search {
  font-size: 8px; font-weight: 500; color: rgba(1,1,1,.65);
  background: rgba(255,255,255,.45);
  padding: 3px 10px; border-radius: 20px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.phone__dock {
  width: 100%;
  display: flex; justify-content: center; gap: 11px;
  padding: 8px 10px;
  border-radius: 21px;
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.phone__dock img { width: 36px; height: 36px; border-radius: 9px; }

/* ════════════════════════════════════════════════════════════════════════
   CTA
   ════════════════════════════════════════════════════════════════════════ */
.cta { padding: 60px 0 0; background: var(--white); }
.cta .wrap { display: flex; flex-direction: column; align-items: center; }

.cta__tick { display: block; width: 1px; height: 120px; background: var(--line); }
.cta__title {
  margin-top: 60px;
  width: 100%; max-width: 362px;
  text-align: center;
  font-size: var(--fs-h2-lg);
  line-height: 1;
  font-weight: 900;
}
.cta .rule { width: 100%; margin-top: 44px; }

.cta__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  padding-top: 23px;
  padding-bottom: 60px;
}
.cta__grid::before {
  content: ''; position: absolute;
  left: 50%; top: 0; width: 1px; height: 100%;
  background: var(--line);
}
.cta__col:first-child { padding-right: 20px; }
.cta__col:last-child  { padding-left: 20px; }
.cta__col p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 20px;
  background: var(--ink); color: var(--white);
  border-radius: 4px;
  padding: 1px 4px 3px;
  font-size: 14px; line-height: 21px; font-weight: 500;
  white-space: nowrap;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.btn:hover { transform: translateY(-1px); background: #322551; }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.site-footer { padding-top: 55px; background: var(--white); }
.site-footer .wrap { display: flex; flex-direction: column; align-items: center; padding-bottom: 190px; }

.footer-logo { display: flex; align-items: center; gap: 16.97px; }
.footer-logo__icon { position: relative; display: block; width: 71.41px; height: 72px; flex: none; }
.footer-logo__icon img { width: 100%; height: 100%; }
.footer-logo__stripe {
  position: absolute; left: 18.29px; top: 29.73px;
  width: 35.821px; height: 12.537px;
  background: var(--mint);
}
.footer-logo__type { width: 143.84px; height: 31.078px; flex: none; }

.footer-grid {
  width: 100%;
  margin-top: 55px; padding-top: 31px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: 30px;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }
.footer-col p.footer-col__title { font-weight: 700; }
.footer-col a { transition: color .3s var(--ease); }
.footer-col a:hover { color: #6b5fa0; }
.footer-social { display: flex; align-items: flex-end; gap: 10px; }
.footer-social img { width: 18px; height: 18px; }

.to-top {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 60px;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--mint);
  display: grid; place-items: center;
  text-align: center;
  font-size: 12px; line-height: 16px; font-weight: 700;
  color: var(--ink);
  transition: transform .35s var(--ease);
}
.to-top:hover { transform: translateX(-50%) translateY(-4px) scale(1.04); }

/* ════════════════════════════════════════════════════════════════════════
   PÁGINA LEGAL — Política de Privacidade
   ════════════════════════════════════════════════════════════════════════ */
.legal-page { background: var(--white); }

/* nesta página o header não fica sobre foto: precisa de fundo próprio */
.site-header--solid {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header--solid .main-nav a { background: rgba(38, 28, 61, .06); }
.site-header--solid .main-nav a:hover { background: var(--mint); }

.legal { padding: 40px 0 80px; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.back-link img { width: 12px; height: 12px; transform: rotate(180deg); }
.back-link:hover { transform: translateX(-3px); opacity: .7; }

.legal__title {
  margin-top: 32px;
  font-size: var(--fs-h2-lg);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.01em;
}
.legal__intro { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.legal__intro p { font-size: var(--fs-body); line-height: 22px; font-weight: 500; }

.legal__section { margin-top: 40px; scroll-margin-top: 100px; }
.legal__section:first-child { margin-top: 0; }
.legal__section h2 {
  font-size: var(--fs-body); line-height: 22px; font-weight: 700;
  letter-spacing: .01em;
}
.legal__section h3 {
  margin-top: 24px;
  font-size: var(--fs-body); line-height: 22px; font-weight: 700;
}
.legal__section p {
  margin-top: 16px;
  font-size: var(--fs-body); line-height: 24px; font-weight: 500;
}
.legal__section p a { text-decoration: underline; font-weight: 600; }
.legal__section strong { font-weight: 700; }

.legal__list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.legal__list li {
  position: relative; padding-left: 22px;
  font-size: var(--fs-body); line-height: 24px; font-weight: 500;
}
.legal__list li::before {
  content: ''; position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(48, 255, 208, .25);
}

.legal__back-btn { margin-top: 56px; }

/* ════════════════════════════════════════════════════════════════════════
   WHATSAPP FLUTUANTE
   ════════════════════════════════════════════════════════════════════════ */
.wpp {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(4, 6, 8, .28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wpp svg { width: 32px; height: 32px; }
.wpp:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(4, 6, 8, .34); }

.wpp__tip {
  position: absolute; right: calc(100% + 12px);
  white-space: nowrap;
  background: var(--ink); color: var(--white);
  font-size: 14px; line-height: 21px; font-weight: 500;
  padding: 5px 12px; border-radius: 999px;
  opacity: 0; transform: translateX(6px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wpp:hover .wpp__tip, .wpp:focus-visible .wpp__tip { opacity: 1; transform: translateX(0); }

/* com o banner de cookies aberto o botão sobe para não ficar atrás dele */
body.has-cookie-bar .wpp { bottom: calc(20px + var(--cookie-h, 0px) + 16px); }

/* ════════════════════════════════════════════════════════════════════════
   BANNER DE COOKIES
   ════════════════════════════════════════════════════════════════════════ */
/* Box flutuante translúcido, centrado — medidas tiradas do PDF "Box Aceite Cookies":
   mobile 395px de largura e 38px do fundo · desktop 923px e 21px do fundo.
   O fundo é preto a 67%: sobre branco resulta em rgb(85,84,85), como no PDF. */
.cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  z-index: 95;
  width: calc(100% - 20px);
  max-width: 395px;
}
.cookie-bar[hidden] { display: none; }

.cookie-bar__inner {
  background: rgba(0, 0, 0, .67);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 10px;
  padding: 20px;
  color: var(--white);
  box-shadow: 0 18px 44px rgba(4, 6, 8, .32);
  display: flex; flex-direction: column;
  align-items: stretch; gap: 16px;
}
.cookie-bar p { font-size: var(--fs-body); line-height: 20px; font-weight: 500; }  /* .fig: Inter Medium 16px */
.cookie-bar a { color: var(--mint); text-decoration: underline; font-weight: 500; }
.cookie-bar a:hover { color: var(--white); }

.cookie-bar__btn {
  width: 100%;
  background: rgba(255, 255, 255, .18);
  color: var(--white);
  border-radius: 8px;
  padding: 14px 20px;
  font-size: var(--fs-body); line-height: 20px; font-weight: 600;  /* .fig: Inter Semi Bold 16px */
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.cookie-bar__btn:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }

/* ═══════════════════════════════ ANIMAÇÕES ═══════════════════════════════ */
[data-anim] { will-change: transform, opacity; }
.js [data-anim] { opacity: 0; }
.js [data-anim="fade-up"] { transform: translate3d(0, 28px, 0); }

/* ════════════════════════════════════════════════════════════════════════
   ≥ 380px — FAQ em duas colunas (como no Layout Mobile do Figma)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 380px) {
  .faq__grid { grid-template-columns: 1fr 1fr; }
  .faq__grid::before {
    content: ''; position: absolute;
    left: 50%; top: 0; width: 1px; height: 100%;
    background: var(--line-light);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ≥ 600px — TABLET
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  :root { --gut: 28px; }

  /* no desktop o box fica em linha única, texto à esquerda e botão à direita */
  .cookie-bar { bottom: 21px; max-width: 923px; }
  .cookie-bar__inner {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 24px; padding: 16px 18px;
  }
  .cookie-bar__btn {
    width: auto; flex: none;
    padding: 12px 22px;
    white-space: nowrap;
  }

  .wpp { right: 28px; bottom: 28px; width: 60px; height: 60px; }
  .wpp svg { width: 34px; height: 34px; }

  body.has-cookie-bar .wpp { bottom: calc(28px + var(--cookie-h, 0px) + 16px); }

  .legal { padding: 56px 0 96px; }
  .legal__title { margin-top: 40px; }

  /* duas colunas: título/introdução à esquerda, conteúdo à direita (como no PDF) */
  .legal__grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: start;
    column-gap: 48px;
  }
  .legal__aside { position: sticky; top: 32px; }
  .legal__aside .legal__title { margin-top: 0; }
  .legal__body {
    padding-left: 48px;
    border-left: 1px solid var(--line);
  }
  .legal__back-btn { grid-column: 1 / -1; justify-self: start; }
  .back-link { grid-column: 1 / -1; margin-bottom: 30px; }

  /* o hero ganha largura junto com a tela */
  .hero__title { max-width: 540px; }
  .hero__card  { max-width: 520px; }

  .benefits__rail-track { flex-wrap: wrap; gap: 32px 37px; }
  .benefits__rail { overflow: visible; }
  .benefits__rail .benefit { flex: 0 0 calc(50% - 19px); }
  .benefits__title { max-width: 560px; }
  .solutions__head h2 { max-width: 560px; }

  .segments__media { height: 460px; }
  .prod__media { height: 460px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ≥ 900px — DESKTOP (Layout Desk do Figma)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  :root {
    --gut: 24px;
    --fs-h1: 36px;   /* valores exatos da prancheta desktop */
    --lh-h1: 36px;
  }

  .only-desk { display: block; }
  .only-mob  { display: none !important; }

  /* ── hero ── */
  .hero__frame { inset: 4px 4px 0; }
  .hero__img--desk { display: block; }
  .hero__img--mob  { display: none; }
  /* sobreposições passam para a metade ESQUERDA */
  .hero__frame .shade { inset: 0 50% 0 0; }
  .hero__frame .hairline { top: 265px; width: 50%; right: auto; }

  .site-header { align-items: flex-start; padding: 24px; }
  .logo__icon { width: 33.92px; height: 34.2px; }
  .logo__stripe { left: 8.69px; top: 14.12px; width: 17.015px; height: 5.955px; }
  .logo__type { width: 68.323px; height: 14.762px; }
  .nav-toggle { display: none; }

  .main-nav { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
  .main-nav a {
    background: rgba(255, 255, 255, .7);
    border-radius: 4px;
    padding: 1px 4px 3px;
    font-size: 16px; line-height: 21px; font-weight: 500;
    color: #000;
    transition: background .3s var(--ease), transform .3s var(--ease);
  }
  .main-nav a:hover { background: var(--mint); transform: translateY(-1px); }

  /* no desktop os dois blocos voltam a ser posicionados como na prancheta */
  .hero__body .wrap { display: block; padding-bottom: 0; }
  .hero__title {
    position: absolute;
    left: var(--gut); top: 290px;
    width: 594px; max-width: none;
    text-shadow: 0 0 10px rgba(0, 0, 0, .2);
  }
  .hero__card {
    position: absolute;
    top: 405px; right: 4px;
    margin-top: 0;
    width: 240px; max-width: none;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-radius: 9px; padding: 16px;
  }
  .hero__card p { color: var(--ink); text-shadow: none; }

  /* ── benefícios ── */
  .benefits { padding: 36px 0 59px; }
  .benefits .wrap::after {
    content: ''; position: absolute;
    left: var(--gut); right: var(--gut); bottom: -59px;
    height: 1px; background: var(--line);
  }
  /* `.benefits__inner.only-desk` (0,2,0) vence `.only-desk` (0,1,0) — sem !important */
  .benefits__inner,
  .benefits__inner.only-desk { display: flex; justify-content: space-between; align-items: flex-start; gap: 38px; }
  .benefits__title { width: 279px; flex: 0 0 279px; }
  .benefits__grid {
    flex: 1 1 auto;
    max-width: 911px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 37px; row-gap: 32px;
    padding-top: 4px;
  }

  /* ── escala ── */
  .scale { padding-top: 31px; }
  .scale__grid {
    display: grid;
    grid-template-columns: minmax(0, 432px) minmax(0, 590px);
    justify-content: space-between;
    align-items: start;
  }
  .scale__copy { margin-top: 5px; }
  .scale__lead, .scale__text { margin-top: 37px; }
  .kpis { margin-top: 0; padding-top: 0; border-top: 0; gap: 21px; }
  .kpi__label { padding-bottom: 8px; }
  .dark-band > .wrap > .rule { margin-top: 24px; }

  /* ── card verde ── */
  .segments { padding-top: 25px; }
  /* entre 900 e 1150px a mídia acompanha a largura (senão a coluna de texto
     fica espremida); a partir de 1150px assume os 611px da prancheta */
  .segments__card {
    height: 532px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
    margin-inline: 0;
  }
  .segments__media { order: initial; }
  .segments__copy { padding: 24px; }
  .segments__copy h2 { max-width: 565px; line-height: 1; }
  .steps { margin-top: 24px; gap: 12px; }

  .segments__media { margin: 4px 4px 4px 0; height: auto; }
  /* no desktop a linha e a sombra voltam ao meio (Figma: y=1478 de 1217→1741) */
  .seg-slide .shade, .prod__media .shade,
  .seg-slide .shade--grad, .prod__media .shade--grad { inset: 50% 0 0 0; height: auto; }
  .seg-slide .hairline { display: block; top: 50%; }
  .seg-slide figcaption::before, .prod__glass::before { display: none; }

  .seg-slide figcaption {
    left: auto; right: 0; bottom: 0;
    width: 240px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-radius: 9px; padding: 16px;
    color: var(--ink);
  }
  .seg-slide figcaption strong { font-size: 16px; line-height: 18px; font-weight: 600; text-shadow: none; }
  .seg-slide figcaption span   { margin-top: 0; font-size: 16px; line-height: 18px; font-weight: 400; }
  .seg-nav { top: 10px; right: 10px; }

  /* ── faq ── */
  .faq { padding: 24px 0; }
  .faq__grid {
    grid-template-columns: minmax(0, 279px) minmax(0, 590px);
    justify-content: space-between;
    align-items: start;
    gap: 0;
  }
  .faq__grid::before {
    left: auto;
    right: calc(var(--gut) + 615px);   /* 590 da coluna + 25 de folga (Figma: 637 vs 662) */
    height: 166px; background: var(--white);
  }
  .faq__intro p { margin-top: 12px; }
  /* Figma: perguntas em y 0/49/98/147 e linhas em 33/82/131 → 49px por item */
  .qa {
    padding-bottom: 17px;
    border-bottom: 1px solid var(--white);
    margin-bottom: 15px;
  }
  .qa:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
  /* no desktop a pergunta e o "+" ficam na MESMA linha (como no PDF) */
  .qa__q {
    flex-direction: row; align-items: center; gap: 8px;
    padding: 0; font-weight: 800;
    white-space: nowrap;
  }

  /* ── soluções ── */
  .solutions { padding-top: 40px; }
  .solutions__head { display: flex; justify-content: space-between; align-items: flex-start; }
  .solutions__head h2 { width: 279px; font-size: var(--fs-body); line-height: var(--lh-body); }
  .solutions__nav { display: flex; gap: 23px; padding-top: 16px; }
  .solutions__nav button {
    font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .solutions__nav button:hover { transform: translateY(-1px); opacity: .7; }
  .solutions__nav button:disabled { opacity: .35; cursor: default; transform: none; }

  .solutions__rail { margin-top: 20px; padding-left: 4px; }
  .solutions__track { gap: 4px; padding-inline: 0; }

  .prod {
    flex: 0 0 min(951px, calc(100vw - 60px));
    max-width: none;
    height: 464px;
    display: grid;
    /* a lista mantém os 336px do design; a mídia absorve o resto */
    grid-template-columns: minmax(0, 1fr) 336px;
    padding-left: 4px;
  }
  .prod__media { margin: 4px 0; height: auto; }
  .prod__glass {
    left: 0; right: auto; bottom: 0;
    width: 240px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-radius: 9px; padding: 16px;
    color: var(--ink);
  }
  .prod__glass strong { font-size: 16px; line-height: 18px; font-weight: 600; text-shadow: none; }
  .prod__glass span   { margin-top: 0; font-size: 16px; line-height: 18px; font-weight: 400; }

  .prod__list { padding: 36px 0 0; gap: 16px; }
  .prod__list li {
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--line-light);
    font-size: 12px; line-height: 12px;
  }
  .prod__list li:last-child { border-bottom: 0; padding-bottom: 0; }
  .prod__list strong { margin-bottom: 4px; }

  .seg-nav--mob { display: none; }

  /* no desktop os botões de loja ficam no topo direito da mídia */
  .store-links { left: auto; right: 20px; top: 20px; }

  .phone { width: 332px; height: 689px; margin-bottom: -230px; border-radius: 53px; border-width: 4.7px; }
  .phone__screen { inset: 3px; border-radius: 49px; }
  .phone__island { width: 97px; height: 29px; top: 14px; border-radius: 14px; }
  .phone__status { padding: 16px 26px 0; font-size: 10px; }
  .phone__apps { padding: 30px 28px 0; }
  .phone__apps img { width: 55px; height: 55px; border-radius: 14px; }
  .phone__dock { gap: 15px; padding: 12px 14px; border-radius: 28px; }
  .phone__dock img { width: 46px; height: 46px; border-radius: 12px; }
  .phone__search { font-size: 10px; padding: 4px 12px; }
  .phone__bottom { padding: 0 11px 22px; gap: 18px; }

  /* ── cta ── */
  .cta { padding-top: 36px; }
  .cta__tick { height: 156px; }
  .cta__title { margin-top: 48px; width: 595px; max-width: none; font-size: 36px; line-height: normal; }
  .cta .rule { margin-top: 56px; }
  .cta__grid { padding-top: 37px; padding-bottom: 46px; }  /* Figma: CTA = 560px de altura */
  .cta__grid::before { height: 176px; }
  .cta__col:first-child { padding-right: 40px; }
  .cta__col:last-child  { padding-left: 25px; }

  /* ── footer ── */
  .site-footer { padding-top: 64px; }
  /* no Figma o rodapé tem exatos 792px: 64 + logo 72 + 64 + grade 592 — sem sobra */
  .site-footer .wrap { padding-bottom: 0; }
  .footer-grid {
    width: min(848px, 100%);
    min-height: 592px;
    margin-top: 64px; padding-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .footer-col { padding: 0 24px; border-right: 1px solid var(--line); }
  .footer-col:last-child { border-right: 0; }
  .to-top { bottom: 50px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ≥ 1150px — mídia dos cards assume a largura exata da prancheta
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1150px) {
  .segments__card { grid-template-columns: minmax(0, 1fr) 611px; }
  .prod { grid-template-columns: 611px 336px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ≥ 1276px — trava na prancheta do design
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1276px) {
  .benefits__grid { grid-template-columns: repeat(3, 279px); }
  .prod { flex-basis: 951px; }
  .hero__card { right: 4px; }
}

/* ═══════════════════════ preferência por menos movimento ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Passos #1–#4 do card verde — acordeão
   O ⊕ fica no FIM do título (mesma linha) e o texto aberto usa a cor da
   marca, não branco: o fundo aqui é verde-menta.
   ════════════════════════════════════════════════════════════════════════ */
.steps li > .qa--step { display: block; }

.steps .steps__row {
  display: block;              /* "#1" em cima, título embaixo (como no Figma) */
  cursor: pointer;
  list-style: none;
}
.steps .steps__row::-webkit-details-marker { display: none; }

.steps .steps__txt {
  display: inline;             /* o ⊕ acompanha a última palavra do título */
}
.steps .steps__txt img {
  display: inline-block;
  vertical-align: -3px;
  margin-left: 8px;
  transition: transform .35s var(--ease);
}
.qa--step[open] .steps__txt img { transform: rotate(45deg); }

/* texto da resposta sobre o verde-menta */
.qa--step .qa__body p,
.segments__copy .qa__body p {
  color: var(--ink);
  opacity: .82;
  padding-top: 6px;
}

/* ── Traço branco e véu das fotos ────────────────────────────────────────────
   Medido nos PDFs de referência, página a página:
     · Carrossel 2 (produtos)  → sem véu no desk NEM no mobile; traço só mobile
     · Carrossel 1 (segmentos) → traço + véu nos dois, e o véu começa
                                 exatamente NA linha do traço, não antes.
   O véu dos produtos saiu do HTML; aqui ficam o traço do desktop e o
   alinhamento do mobile.                                                     */

/* Desktop dos segmentos: o <span class="hairline"> existia no HTML mas nunca
   chegou a pintar — a regra trazia só display e top, sem position, altura ou
   cor, então o elemento ficava com 0px e sem fundo.                          */
@media (min-width: 900px) {
  .seg-slide .hairline {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 50%;     /* PDF: y=265 de 524px de foto */
    height: 1px;
    background: var(--white);
    z-index: 2;
    pointer-events: none;
  }
}

/* Mobile dos segmentos: o véu nascia numa percentagem fixa (42%) enquanto o
   traço acompanhava a legenda — duas alturas diferentes, daí o desalinhamento.
   Agora o véu é ::after da própria legenda: parte do mesmo ponto do traço,
   mesmo quando o título quebra em duas linhas.                               */
@media (max-width: 899.98px) {
  .seg-slide .shade,
  .seg-slide .shade--grad { display: none; }

  .seg-slide figcaption::after {
    content: '';
    position: absolute;
    z-index: -1;                      /* atrás do texto, à frente da foto */
    left: -14px; right: -14px;
    top: -13px;                       /* mesma linha do ::before (o traço) */
    bottom: -600px;                   /* o overflow:hidden do figure corta */
    background: linear-gradient(180deg, rgba(4, 6, 8, .19) 0%, rgba(4, 6, 8, .58) 100%);   /* PDF: o céu cai de rgb(202) para rgb(164) logo abaixo do traço */
    pointer-events: none;
  }
}

/* Card de produto no mobile: 402px numa tela de 414, com 6px de folga de cada
   lado (medido no Layout Mobile.pdf: x 6–407). Estava em calc(100vw - 12px),
   e o 100vw conta a barra de rolagem — o card saía mais largo que o trilho e
   encostava à esquerda, deixando sobra à direita. Medir pelo próprio trilho
   (100% do .solutions__track, que já tem os 6px de padding) resolve. */
@media (max-width: 899.98px) {
  .prod {
    flex: 0 0 100%;
    max-width: 402px;
    margin-inline: auto;
  }
}

/* O Embla compensa o padding-inline do track no cálculo do offset, então os 6px
   voltavam a zero e o card encostava na borda esquerda. A folga precisa ficar
   fora do trilho — no viewport — para sobreviver ao transform do carrossel. */
@media (max-width: 899.98px) {
  .solutions__viewport { padding-inline: 6px; }
  .solutions__track { padding-inline: 0; }
}

/* Véu dos slides de produto — SÓ MOBILE.
   Ele cobre a foto INTEIRA, não a metade de baixo: foi por isso que a medição
   comparando acima/abaixo do traço deu 1.000 e me levou a removê-lo por engano.
   A conta fecha: soft-light com preto puro equivale a elevar o canal ao
   quadrado, e (229/255)²·255 = 206 contra os 205 medidos no PDF (idem 195/192
   e 202/201 nos outros canais). No desktop os PDFs não têm véu nenhum. */
@media (max-width: 899.98px) {
  .prod__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;                       /* abaixo da legenda, que está em z-index 2 */
    background: var(--black);
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
  /* O PDF traz o título com traçado limpo; a sombra difusa deixava o branco
     esfumaçado sobre as fotos claras (Access e App proprietário). */
  .prod__glass strong { text-shadow: none; }
}


/* Slide do app, só no mobile: a legenda é branca sobre a tela azul-clara do
   mockup, e ali o contraste é de 1,2:1 — ilegível. A tela faz parte do PNG,
   então não há como escurecê-la por CSS; inverter a legenda para o roxo da
   marca sobe o contraste para ~12:1. Vale só para este card, porque nos outros
   três a foto é escura e o branco é o certo. */
@media (max-width: 899.98px) {
  .prod__media--phone .prod__glass,
  .prod__media--phone .prod__glass strong,
  .prod__media--phone .prod__glass span { color: var(--ink); }
  .prod__media--phone .prod__glass::before { background: var(--ink); }
}

/* Diagrama "Direitos do Titular" que veio no documento validado pelo jurídico.
   O texto alternativo repete os quatro direitos, porque a imagem é a única
   forma em que eles aparecem no documento — sem o alt, quem usa leitor de tela
   ficaria sem essa parte da política. */
.legal__figure { margin: 18px 0 0; }
.legal__figure img {
  width: 100%;
  max-width: 472px;
  height: auto;
  border-radius: 6px;
}

/* A coluna da esquerda é sticky, mas o grid usa align-items:start — então o
   item não ocupa a altura da linha e o sticky "vaza" para fora dela, indo parar
   por cima do botão "voltar para o site" no fim da página. Esticar o item faz o
   sticky deslizar dentro da própria linha e parar onde ela termina. */
@media (min-width: 900px) {
  .legal__aside { align-self: stretch; }
  .legal__back-btn { position: relative; z-index: 2; }
}

/* O botão "voltar" saiu de dentro do .legal__grid: como a coluna da esquerda é
   sticky e desliza por toda a altura da linha, os dois disputavam o mesmo
   espaço no fim da página e o botão aparecia por cima do texto. Fora do grid,
   a colisão deixa de ser possível. */
.legal__foot { margin-top: 56px; padding-bottom: 8px; }
.legal__foot .legal__back-btn { margin-top: 0; display: inline-flex; }

/* O corte horizontal ficava só no body. Quando ele está no body e não no html,
   o Safari do iOS mantém a área rolável na largura antiga e o dedo "escorrega"
   na horizontal ou o scroll vertical engasga. Declarar nos dois resolve, e o
   overflow-y explícito evita que o corte horizontal transforme o body em um
   contêiner de rolagem próprio — que é o que quebra position:sticky. */
html {
  overflow-x: hidden;
  overscroll-behavior-y: none;   /* sem "puxar e soltar" acidental no topo */
}
body {
  overflow-x: hidden;
  overflow-y: visible;
}