/* =========================================================
   DISTINTO — Landing page
   Layout base em 1920px (Figma). Medidas escalam com --px,
   que vale 1px em 1920 e encolhe proporcionalmente abaixo disso.
   ========================================================= */

:root {
  --red: #e60f1a;
  --ink: #0d0d0d;
  --black: #000000;
  --gray: #b3afaa;
  --cream: #f2efe8;
  --white: #ffffff;

  --font: "Geist", system-ui, -apple-system, sans-serif;

  --px: min(calc(100vw / 1920), 1px);
  --gutter: max(20px, calc(50 * var(--px)));
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Links internos (#âncoras) rolam suavemente até o destino */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

/* Linha justificada (títulos com espaçamento distribuído) */
.justify-line {
  display: block;
  text-align: justify;
  text-align-last: justify;
}

/* ---------- Títulos de seção ---------- */
.section-title {
  font-size: max(40px, calc(88 * var(--px)));
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-title--light { color: var(--cream); }
.section-title--white { color: var(--white); }

/* ---------- Botões ---------- */
/* Botão em "cubo": a face de baixo rola para a frente girando no eixo X */
.btn {
  --btn-h: max(48px, calc(60 * var(--px)));
  --btn-dur: 0.5s;
  --btn-ease: cubic-bezier(0.33, 1, 0.68, 1);
  display: inline-block;
  vertical-align: top;
  height: var(--btn-h);
  perspective: 800px;
  font-size: max(16px, calc(22 * var(--px)));
  font-weight: 400;
  white-space: nowrap;
}
.btn__cube {
  position: relative;
  display: block;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--btn-h) / -2)) rotateX(0deg);
  transition: transform var(--btn-dur) var(--btn-ease);
}
.btn:hover .btn__cube,
.btn:focus-visible .btn__cube {
  transform: translateZ(calc(var(--btn-h) / -2)) rotateX(90deg);
}
.btn__face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(10px, calc(16 * var(--px)));
  height: var(--btn-h);
  padding: 0 max(24px, calc(32 * var(--px)));
  backface-visibility: hidden;
}
.btn__face--front {
  background: var(--btn-bg);
  color: var(--btn-fg);
  transform: translateZ(calc(var(--btn-h) / 2));
}
.btn__face--bottom {
  position: absolute;
  inset: 0;
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  transform: rotateX(-90deg) translateZ(calc(var(--btn-h) / 2));
}
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.btn--wide { min-width: max(200px, calc(287 * var(--px))); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--hover-white { --btn-hover-bg: var(--white); --btn-hover-fg: var(--ink); }
.btn--hover-red { --btn-hover-bg: var(--red); --btn-hover-fg: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .btn { --btn-dur: 0s; }
}
.btn__icon {
  width: max(12px, calc(16 * var(--px)));
  height: max(12px, calc(16 * var(--px)));
  flex-shrink: 0;
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(24px, calc(40 * var(--px))) var(--gutter);
  pointer-events: none; /* só logo e ícone recebem clique */
}
.header__logo,
.header__menu { pointer-events: auto; }

/* Cor adaptativa: branco por padrão; .is-dark (fundo claro) vira preto */
.header__logo img {
  width: max(80px, calc(106 * var(--px)));
  filter: invert(1);
  transition: filter 0.3s ease;
}
.header__logo.is-dark img { filter: none; }
/* Logo do Ponto Zero (páginas de produto): duas linhas, mais alto */
.header__logo--pz img { width: max(96px, calc(136 * var(--px))); }

/* Ícone do menu: as duas barras são as mesmas no hamburguer e no X.
   Usa as propriedades independentes `translate` e `rotate` para sequenciar:
   abrir = juntam no centro e depois giram; fechar = desgiram e depois separam. */
.header__menu {
  --line-gap: max(8px, calc(14 * var(--px)));
  --line-offset: calc(var(--line-gap) / 2 + 1px);
  position: relative;
  display: block;
  width: max(28px, calc(37 * var(--px)));
  height: calc(var(--line-gap) + 14px);
}
.header__menu span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--white);
  /* fechando: primeiro desgira, depois separa */
  transition:
    rotate 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    translate 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
    opacity 0.3s ease,
    background-color 0.3s ease;
}
.header__menu span:first-child { translate: 0 calc(var(--line-offset) * -1); }
.header__menu span:last-child { translate: 0 var(--line-offset); }
.header__menu.is-dark span { background: var(--ink); }

/* Hover: barras se aproximam e perdem opacidade */
@media (hover: hover) {
  .header__menu:hover span { opacity: 0.3; }
  html:not(.menu-open) .header__menu:hover span:first-child {
    translate: 0 calc(var(--line-offset) * -0.55);
  }
  html:not(.menu-open) .header__menu:hover span:last-child {
    translate: 0 calc(var(--line-offset) * 0.55);
  }
}

/* Aberto: primeiro juntam no centro, depois giram em X */
.menu-open .header__menu span {
  translate: 0 0;
  transition:
    translate 0.25s cubic-bezier(0.65, 0, 0.35, 1),
    rotate 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
    opacity 0.3s ease,
    background-color 0.3s ease;
}
.menu-open .header__menu span:first-child { rotate: 45deg; }
.menu-open .header__menu span:last-child { rotate: -45deg; }

/* =========================================================
   MENU
   ========================================================= */
.menu {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 55;
  width: max(260px, calc(300 * var(--px)));
  display: flex;
  flex-direction: column;
  gap: max(28px, calc(44 * var(--px)));
  padding: max(110px, calc(134 * var(--px))) max(20px, calc(20 * var(--px))) 40px;
  background: var(--red);
  color: var(--ink);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.6s;
}
.menu-open .menu {
  transform: none;
  visibility: visible;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}
.menu__main li {
  font-size: max(24px, calc(32 * var(--px)));
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.menu__social li {
  font-size: max(13px, calc(16 * var(--px)));
  line-height: 1.8;
}
.menu a { transition: opacity 0.2s ease; }
@media (hover: hover) {
  .menu a:hover { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu-open .menu,
  .header__menu span,
  .menu-open .header__menu span { transition: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: max(640px, calc(992 * var(--px)));
  background-color: var(--red);
  background-image: url("assets/hero.png");
  background-repeat: no-repeat;
  /* Enquadramento do Figma: imagem ampliada e cortada no rosto */
  background-size: calc(3100 * var(--px)) auto;
  background-position: calc(-470 * var(--px)) calc(-1180 * var(--px));
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.hero__content {
  width: max(320px, calc(610 * var(--px)));
  margin-top: max(40px, calc(40 * var(--px)));
}
.hero__title {
  font-size: max(44px, calc(86 * var(--px)));
  font-weight: 600;
  line-height: 0.93;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero__text {
  margin-top: max(20px, calc(36 * var(--px)));
  font-size: max(16px, calc(26 * var(--px)));
  line-height: 1.1;
  max-width: calc(600 * var(--px) + 20px);
}
.hero .btn {
  margin-top: max(24px, calc(34 * var(--px)));
  width: max(260px, calc(315 * var(--px)));
}

/* =========================================================
   PROCESSO
   ========================================================= */
/* Wrapper do pin: o espaçador (::after) é a distância de scroll em que a seção fica presa.
   Desktop: metade para o texto, metade para a entrada dos cards. */
.process-pin {
  --pin-distance: 300vh;
  background: var(--ink);
}
.process-pin::after {
  content: "";
  display: block;
  height: var(--pin-distance);
}
.process {
  position: sticky;
  top: 0;
  overflow: clip; /* cards fora da tela não geram scroll horizontal */
  background: var(--ink);
  padding: max(64px, calc(84 * var(--px))) var(--gutter) max(64px, calc(90 * var(--px)));
}
.process__title {
  max-width: calc(1206 * var(--px));
  font-size: max(28px, calc(60 * var(--px)));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-align: justify;
  letter-spacing: -0.035em;
}
.reveal-word { white-space: nowrap; }
.reveal-char { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .process-pin::after { display: none; }
  .reveal-char { opacity: 1; }
  .step { transform: none !important; }
}

.step { will-change: transform; }

.process__grid {
  margin-top: max(48px, calc(120 * var(--px)));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(16px, calc(20 * var(--px)));
}
.step__img {
  width: 100%;
  aspect-ratio: 593 / 356;
  object-fit: cover;
}
.step__info {
  display: flex;
  align-items: flex-start;
  gap: max(16px, calc(28 * var(--px)));
  margin-top: max(20px, calc(30 * var(--px)));
}
.step__num {
  font-size: max(64px, calc(124 * var(--px)));
  font-weight: 400;
  line-height: 0.75;
  letter-spacing: -0.03em;
}
.step__name {
  font-size: max(22px, calc(34 * var(--px)));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.step__text {
  margin-top: max(8px, calc(12 * var(--px)));
  font-size: max(14px, calc(18 * var(--px)));
  line-height: 1.12;
  max-width: calc(340 * var(--px) + 20px);
}

/* =========================================================
   COMPARATIVO
   ========================================================= */
.compare {
  background: var(--ink);
  padding: max(48px, calc(120 * var(--px))) var(--gutter) max(64px, calc(125 * var(--px)));
}
/* Entrada: título sobe de trás de uma máscara, linha a linha; depois os cards */
.mask-line {
  display: block;
  overflow: hidden;
  /* folga em cima (acentos e til, como em NÃO/É) e embaixo (Ç, vírgulas)
     para nada ser cortado pela máscara; as margens negativas compensam */
  padding-top: 0.16em;
  margin-top: -0.16em;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.mask-line__inner { display: block; }

.js [data-reveal] .mask-line__inner {
  /* desce o bastante para esconder também o acento acima da letra */
  transform: translate3d(0, calc(100% + 0.3em), 0);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal] .compare__card {
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].is-in .mask-line__inner,
.js [data-reveal].is-in .compare__card {
  opacity: 1;
  transform: none;
}
.js [data-reveal].is-in .mask-line:nth-child(2) .mask-line__inner { transition-delay: 0.12s; }
.js [data-reveal].is-in .compare__card:nth-child(1) { transition-delay: 0.35s; }
.js [data-reveal].is-in .compare__card:nth-child(2) { transition-delay: 0.5s; }
/* Genérico: qualquer bloco .reveal-up dentro de [data-reveal] sobe com fade.
   O atraso de cada um vem de --reveal-delay (definido inline no HTML). */
.js [data-reveal] .reveal-up {
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].is-in .reveal-up {
  opacity: 1;
  transform: none;
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal]:not(.is-in) .reveal-up { transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .reveal-up { opacity: 1; transform: none; transition: none; }
}

/* Reset instantâneo (acontece com a seção fora da tela) */
.js [data-reveal]:not(.is-in) .mask-line__inner,
.js [data-reveal]:not(.is-in) .compare__card { transition-duration: 0s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .mask-line__inner,
  .js [data-reveal] .compare__card { opacity: 1; transform: none; transition: none; }
}

.compare__grid {
  margin-top: max(32px, calc(40 * var(--px)));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(16px, calc(20 * var(--px)));
}
.compare__card {
  padding: max(24px, calc(30 * var(--px))) max(24px, calc(36 * var(--px))) max(24px, calc(38 * var(--px)));
}
.compare__card--common {
  border: 1px solid var(--cream);
  color: var(--white);
}
.compare__card--built {
  background: var(--red);
  color: var(--ink);
  padding-left: max(24px, calc(30 * var(--px)));
}
.compare__heading {
  font-size: max(24px, calc(34 * var(--px)));
  font-weight: 700;
  letter-spacing: -0.01em;
}
.compare__card--built .compare__heading { color: var(--black); }
.compare__list {
  margin-top: max(20px, calc(30 * var(--px)));
}
.compare__list li {
  font-size: max(15px, calc(20 * var(--px)));
  padding: max(14px, calc(22 * var(--px))) 0;
  border-bottom: 1px solid currentColor;
}
.compare__card--common .compare__list li { border-color: var(--cream); }
.compare__card--built .compare__list li { border-color: var(--ink); margin-right: calc(8 * var(--px)); }
.compare__list li:first-child { padding-top: 0; }
.compare__result {
  margin-top: max(28px, calc(40 * var(--px)));
  padding: max(18px, calc(24 * var(--px))) max(20px, calc(26 * var(--px)));
  font-size: max(15px, calc(20 * var(--px)));
}
.compare__result strong {
  display: block;
  font-size: max(18px, calc(24 * var(--px)));
  font-weight: 700;
}
.compare__card--common .compare__result { background: var(--cream); color: var(--ink); }
.compare__card--built .compare__result { background: var(--ink); color: var(--white); }

/* =========================================================
   SOLUÇÕES
   ========================================================= */
.solutions {
  background: var(--cream);
  padding: max(56px, calc(100 * var(--px))) var(--gutter) max(64px, calc(105 * var(--px)));
}
.solutions .section-title { font-size: max(40px, calc(82 * var(--px))); }
.solutions__list {
  margin-top: max(32px, calc(70 * var(--px)));
  display: flex;
  flex-direction: column;
}
/* Empilhamento: cada card gruda no topo um pouco abaixo do anterior,
   deixando a borda superior dos de trás aparente */
.solutions__list {
  --stack-top: max(80px, calc(110 * var(--px)));
  --stack-step: max(16px, calc(26 * var(--px)));
  --stack-gap: max(16px, calc(38 * var(--px)));
}
.solution {
  position: sticky;
  top: var(--stack-top);
}
/* As margens inferiores mantêm o escalonamento quando a pilha é liberada
   no fim da lista (o sticky respeita a margem); as superiores compensam
   para preservar o espaçamento original entre os cards. */
.solution:nth-child(1) { margin-bottom: calc(var(--stack-step) * 2); }
.solution:nth-child(2) {
  top: calc(var(--stack-top) + var(--stack-step));
  margin-top: calc(var(--stack-gap) - var(--stack-step) * 2);
  margin-bottom: var(--stack-step);
}
.solution:nth-child(3) {
  top: calc(var(--stack-top) + var(--stack-step) * 2);
  margin-top: calc(var(--stack-gap) - var(--stack-step));
}

.solution {
  display: grid;
  grid-template-columns: calc(460 * var(--px)) 1fr;
  align-items: center;
  min-height: max(360px, calc(465 * var(--px)));
  padding: max(40px, calc(64 * var(--px))) 0;
}
.solution--white { background: var(--white); color: var(--ink); }
.solution--dark { background: var(--ink); color: var(--white); }
.solution--red { background: var(--red); color: var(--black); }

.solution__brand {
  display: flex;
  justify-content: center;
  align-items: center;
}
.solution__logo--ponto { width: max(160px, calc(260 * var(--px))); }
.solution__logo--inev { width: max(160px, calc(252 * var(--px))); filter: invert(1); }
.solution__logo--distinto { width: max(160px, calc(258 * var(--px))); }

.custom-made {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.custom-made__label {
  margin-top: max(4px, calc(8 * var(--px)));
  font-size: max(13px, calc(19 * var(--px)));
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.solution__desc {
  font-size: max(20px, calc(36 * var(--px)));
  line-height: 1.33;
  letter-spacing: -0.01em;
  max-width: calc(940 * var(--px) + 20px);
}
.solution--red .solution__desc { max-width: none; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: max(10px, calc(19 * var(--px))) max(10px, calc(23 * var(--px)));
  margin-top: max(20px, calc(36 * var(--px)));
  max-width: calc(860 * var(--px) + 40px);
}
.tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: max(36px, calc(45 * var(--px)));
  min-width: max(120px, calc(178 * var(--px)));
  padding: 0 max(12px, calc(18 * var(--px)));
  border: 1px solid currentColor;
  font-size: max(13px, calc(18 * var(--px)));
  white-space: nowrap;
}
.solution--red .tags { max-width: calc(660 * var(--px) + 40px); }

/* Hover das caixinhas: preenchimento invertido (sem ação no clique) */
.tags li {
  cursor: default;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
@media (hover: hover) {
  .solution--white .tags li:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .solution--dark .tags li:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
  .solution--red .tags li:hover { background: var(--black); color: var(--red); border-color: var(--black); }
}

.solution .btn { margin-top: max(20px, calc(30 * var(--px))); }

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  background: var(--ink);
  padding: max(64px, calc(128 * var(--px))) var(--gutter) max(80px, calc(170 * var(--px)));
}
.faq__list { margin-top: max(40px, calc(105 * var(--px))); }
.faq__item {
  border-bottom: 1px solid rgba(179, 175, 170, 0.6);
  padding: max(24px, calc(42 * var(--px))) 0;
}
.faq__item:first-child { padding-top: 0; }
.faq__question {
  display: grid;
  grid-template-columns: calc(160 * var(--px)) 1fr auto;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__num {
  font-size: max(20px, calc(38 * var(--px)));
  color: var(--gray);
  font-weight: 500;
}
.faq__q {
  font-size: max(20px, calc(36 * var(--px)));
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq__icon {
  position: relative;
  width: max(18px, calc(26 * var(--px)));
  height: max(18px, calc(26 * var(--px)));
  margin-right: calc(4 * var(--px));
  /* O mesmo "+" gira 45° para virar o "×" */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 4px;
  margin-top: -2px;
  background: var(--white);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon,
html:not(.js) .faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__content { overflow: hidden; }
.faq__cta {
  /* folga inferior: no meio do giro o botão passa ~20% da altura além da caixa */
  margin: max(20px, calc(30 * var(--px))) 0 max(14px, calc(16 * var(--px))) calc(160 * var(--px));
}
.faq__answer {
  margin: max(14px, calc(22 * var(--px))) 0 0 calc(160 * var(--px));
  max-width: calc(1140 * var(--px) + 20px);
  font-size: max(15px, calc(21 * var(--px)));
  line-height: 1.45;
  font-weight: 400;
}

/* =========================================================
   FOOTER
   ========================================================= */
/* Footer revelado: fica fixo no fundo da tela, atrás da página, e o
   conteúdo (.page) rola por cima dele. A margem inferior da .page abre
   exatamente a altura do footer no fim do scroll. */
:root { --footer-h: 100vh; }
@supports (height: 100svh) {
  :root { --footer-h: 100svh; }
}
.page {
  position: relative;
  z-index: 1;
  background: var(--ink);
  margin-bottom: var(--footer-h);
}
/* Telas muito baixas: o conteúdo do footer não caberia em 100vh,
   então ele volta ao fluxo normal (sem revelação) para nada ser cortado */
@media (max-height: 620px) {
  .page { margin-bottom: 0; }
  .footer { position: relative !important; height: auto !important; }
}
.footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 0;
  height: var(--footer-h);
  overflow: hidden;
  background: var(--red);
  color: var(--ink);
  padding: max(64px, calc(126 * var(--px))) var(--gutter) max(24px, calc(26 * var(--px)));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.footer__brand { padding-top: calc(85 * var(--px)); }
.footer__symbol {
  width: max(72px, calc(114 * var(--px)));
  /* Giro contínuo no eixo Y, sempre legível: cada ciclo vai de -90° a 90°
     (de lado a de lado, passando pela frente). O reinício acontece com o
     símbolo de perfil (espessura zero), então o salto é invisível e o verso
     espelhado nunca aparece. 2s por meia volta = mesma velocidade de 4s/volta.
     A perspectiva vai no próprio transform para centralizar no símbolo. */
  animation: symbol-spin 2s linear infinite;
}
@keyframes symbol-spin {
  from { transform: perspective(600px) rotateY(-90deg); }
  to { transform: perspective(600px) rotateY(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .footer__symbol { animation: none; }
}
.footer__tagline {
  margin-top: max(16px, calc(26 * var(--px)));
  font-size: max(36px, calc(64 * var(--px)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.footer__nav {
  width: max(320px, calc(593 * var(--px)));
  display: flex;
  flex-direction: column;
  gap: max(56px, calc(80 * var(--px)));
}
.footer__group {
  display: grid;
  grid-template-columns: 1fr calc(241 * var(--px) + 20px);
  padding-bottom: max(16px, calc(20 * var(--px)));
  border-bottom: 1px solid var(--ink);
}
.footer__label {
  font-size: max(14px, calc(16 * var(--px)));
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 5px;
}
.footer__group ul li {
  font-size: max(14px, calc(16 * var(--px)));
  line-height: 1.6;
}
.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin-top: 60px;
}
.footer__logo { width: max(90px, calc(128 * var(--px))); }
.footer__address,
.footer__copy {
  font-size: max(13px, calc(20 * var(--px)));
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer__address { margin-right: calc(30 * var(--px)); }
.footer__copy { justify-self: end; }

/* Quebra de linha que só vale no mobile (<br class="br-mobile">) */
.br-mobile { display: none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 900px) {
  .br-mobile { display: inline; }

  /* Enquadramento mobile: o topo do coque (27,18% da altura da imagem,
     58,1% da largura) fica alinhado ao topo do logo (--bun-top) e a base
     da foto encosta no fim do hero. (H - T) = altura útil abaixo do coque. */
  .hero {
    --hero-h: max(100svh, 560px);
    --bun-top: 24px;
    --below-bun: calc(var(--hero-h) - var(--bun-top));
    height: var(--hero-h);
    min-height: 0;
    align-items: flex-end;
    padding-bottom: 56px;
    /* altura da imagem = (H - T) / (1 - 0.2718) */
    background-size: auto calc(var(--below-bun) * 1.3733);
    background-position:
      calc(50vw - var(--below-bun) * 0.8791)
      calc(var(--bun-top) - var(--below-bun) * 0.3733);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Degradê na cor da seção seguinte (--ink): base sólida para emendar sem corte */
    background: linear-gradient(
      to top,
      var(--ink) 0%,
      rgba(13, 13, 13, 0.85) 30%,
      rgba(13, 13, 13, 0) 65%
    );
  }
  .hero__content { position: relative; width: 100%; max-width: 480px; margin-top: 0; }
  .hero__title { font-size: min(64px, 12.4vw); white-space: nowrap; }
  .hero__text { max-width: none; }
  .hero .btn {
    width: auto;
    /* Botão invertido sobre o fundo escuro; hover vermelho (branco sobre preto) */
    --btn-bg: var(--white);
    --btn-fg: var(--ink);
    --btn-hover-bg: var(--red);
    --btn-hover-fg: var(--white);
  }

  .step__text,
  .solution__desc,
  .faq__answer { max-width: none; }
  .tags { max-width: none; }

  .process-pin { --pin-distance: 150vh; }
  .process__title { text-align: left; font-size: 26px; }
  .step {
    transform: translate3d(100vw, 0, 0);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .step.is-in { transform: none; }
  .process__grid { grid-template-columns: 1fr; gap: 40px; }

  .compare__grid { grid-template-columns: 1fr; }

  .solution {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 24px;
  }
  .solution__brand { justify-content: flex-start; }
  .solution__desc br { display: none; }
  .tags li { min-width: 0; }

  .faq__question { grid-template-columns: 48px 1fr auto; gap: 8px; }
  .faq__answer { margin-left: 56px; }
  .faq__cta { margin-left: 56px; }

  /* Menu mobile: tela cheia, links maiores; trava o scroll da página */
  .menu {
    width: 100%;
    padding: 120px 20px 48px;
    gap: 40px;
  }
  .menu__main li { font-size: 40px; line-height: 1.25; }
  .menu__social li { font-size: 16px; }
  html.menu-open { overflow: hidden; }

  /* Footer mobile: tudo centralizado, colunas Menu | Socials com divisória */
  .footer {
    justify-content: center;
    align-items: center;
    text-align: center;
    /* base maior que o topo: o bloco fica levemente acima do centro */
    padding: 48px 20px 120px;
  }
  .footer__top {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 40px;
  }
  .footer__brand {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__symbol { width: 84px; }
  .footer__tagline { margin-top: 28px; font-size: 34px; }
  .footer__nav {
    flex-direction: row;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 356px;
  }
  .footer__group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
  }
  .footer__group + .footer__group { border-left: 1px solid var(--ink); }
  .footer__label { padding-top: 0; font-size: 15px; font-weight: 600; }
  .footer__group ul li { font-size: 15px; line-height: 1.6; }
  .footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    margin-top: 80px;
  }
  .footer__logo { display: none; }
  .footer__address,
  .footer__copy { font-size: 10px; margin: 0; justify-self: center; }
}