/* ==========================================================================
   Portfólio da Projetar Web — estilo
   Identidade da agência (identidade/design-guide.md): creme 60%, preto 30%,
   azul 10% + coral só em ponto. Bordas finas, sem sombra difusa.
   As cores estão todas aqui em :root — pra mudar, é só trocar o valor.
   ========================================================================== */

:root {
  --creme: #f3efe6;      /* fundo principal (60%) */
  --papel: #fcfbf8;      /* superfície mais clara */
  --preto: #121212;      /* texto e cards escuros (30%) */
  --preto-2: #1c1c1c;    /* superfície dentro do preto */
  --grafite: #5b5a55;    /* texto secundário sobre claro */
  --cinza-claro: #b9b4aa;/* texto secundário sobre escuro */
  --linha: #d5d0c6;      /* bordas 1px sobre creme */
  --linha-escura: #333230;
  --azul: #2447f9;       /* ação (10%) */
  --azul-forte: #1730b8;
  --azul-claro: #6c85ff; /* azul legível sobre preto */
  --coral: #ff5a3c;      /* ponto do eyebrow, "no ar" */

  --fonte-titulo: 'Bricolage Grotesque', Arial, Helvetica, sans-serif;
  --fonte-texto: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  --fonte-mono: 'IBM Plex Mono', Consolas, monospace;

  --largura: 1280px;
  --gutter: 20px;
  --topo-h: 64px;
  --raio: 20px;          /* cards */
  --raio-btn: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--preto);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
.ico { width: 18px; height: 18px; flex: none; }

.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--preto); color: var(--creme); padding: 10px 14px; text-decoration: none; }
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--fonte-titulo); font-weight: 800;
  letter-spacing: -0.035em; line-height: 0.98;
  font-size: clamp(2.4rem, 8.6vw, 4.8rem);
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--azul); }
.display--md { font-size: clamp(1.9rem, 5.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fonte-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grafite);
}
.eyebrow .ponto { width: 7px; height: 7px; background: var(--coral); flex: none; }
.eyebrow--claro { color: var(--cinza-claro); }

/* linhas do título sobem uma a uma na abertura */
.display .linha { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.display .linha > span { display: block; text-wrap: initial; }
html.js .display .linha > span { transform: translateY(105%); animation: sobe .8s cubic-bezier(.2,.7,.2,1) forwards; }
html.js .display .linha:nth-child(2) > span { animation-delay: .08s; }
html.js .display .linha:nth-child(3) > span { animation-delay: .16s; }
html.js .display .linha:nth-child(4) > span { animation-delay: .24s; }
@keyframes sobe { to { transform: translateY(0); } }

/* --------------------------------------------------------------------------
   Marca (wordmark em texto: "Projetar" preto + "Web" azul, sem espaço)
   -------------------------------------------------------------------------- */
.marca { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; text-decoration: none; display: inline-flex; line-height: 1; }
.marca__w { color: var(--azul); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  font-family: var(--fonte-texto); font-weight: 600; font-size: 0.95rem; line-height: 1; letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--raio-btn);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
  white-space: nowrap; cursor: pointer;
}
.btn .ico--fim { transition: transform .25s; }
.btn:hover .ico--fim { transform: translate(2px, -2px); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--azul { background: var(--azul); color: #fff; border-color: var(--azul); box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18); }
.btn--azul:hover { background: var(--azul-forte); border-color: var(--azul-forte); }
.btn--preto { background: var(--preto); color: var(--creme); border-color: var(--preto); }
.btn--preto:hover { background: #2a2a2a; }
.btn--linha { background: transparent; color: var(--preto); border-color: var(--preto); }
.btn--linha:hover { background: var(--preto); color: var(--creme); }
.btn--claro { background: var(--creme); color: var(--preto); border-color: var(--creme); }
.btn--claro:hover { background: #fff; }
.btn--vazado { background: transparent; color: var(--creme); border-color: rgba(243,239,230,.35); }
.btn--vazado:hover { border-color: var(--creme); background: rgba(243,239,230,.08); }
.btn--pq { min-height: 42px; padding: 0 14px; font-size: 0.85rem; gap: 8px; }
.btn--pq .ico { width: 16px; height: 16px; }
.btn--gd { min-height: 60px; padding: 0 28px; font-size: 1.05rem; }
.btn--gd .ico { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Topo fixo
   -------------------------------------------------------------------------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(243,239,230,.97); border-bottom: 1px solid var(--linha); }
.topo__in { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); height: var(--topo-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo__nav { display: none; gap: 28px; }
.topo__nav a { text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--grafite); }
.topo__nav a:hover { color: var(--preto); }
.topo .btn__txt { display: none; }
.topo .btn--pq { min-width: 42px; padding: 0 12px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: 52px 0 56px; overflow: hidden; }
.hero__in { display: grid; gap: 40px; }
.hero .eyebrow { margin-bottom: 22px; }
.hero__sub { margin-top: 26px; color: var(--grafite); font-size: 1.08rem; max-width: 52ch; }
.hero__acoes { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.provas { margin-top: 32px; display: grid; gap: 10px; font-size: 0.92rem; color: var(--grafite); }
.provas li { display: flex; align-items: center; gap: 10px; }
.provas .ico { color: var(--azul); width: 18px; height: 18px; }

/* três celulares com os projetos */
.hero__palco { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 340px; }
.hero__palco .phone { position: absolute; bottom: 0; width: 150px; padding: 6px; border-radius: 24px; }
.hero__palco .phone__screen { border-radius: 19px; }
.hero__palco .phone__island { top: 7px; height: 12px; width: 30%; }
.hero__palco .phone--esq { transform: translateX(-88%) rotate(-8deg); bottom: 12px; width: 132px; z-index: 1; }
.hero__palco .phone--dir { transform: translateX(88%) rotate(8deg); bottom: 12px; width: 132px; z-index: 1; }
.hero__palco .phone--meio { z-index: 2; }

/* --------------------------------------------------------------------------
   Aparelhos (usados no hero e nos cards)
   -------------------------------------------------------------------------- */
.phone { display: block; width: min(300px, 78vw); padding: 10px; background: #0c0c0c; border: 1px solid #2a2a2a; border-radius: 42px; text-decoration: none; position: relative; }
.phone__screen { display: block; position: relative; overflow: hidden; aspect-ratio: 720 / 1560; border-radius: 32px; background: #1a1a1a; }
.phone__screen video, .phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone__island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 28%; height: 20px; background: #000; border-radius: 999px; }
.phone__dica {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(18,18,18,.86); color: var(--creme);
  font-family: var(--fonte-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 12px; white-space: nowrap; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  transition: opacity .4s;
}
.palco.is-tocando .phone__dica { opacity: 0; }
.phone:hover .phone__dica, .phone:focus-visible .phone__dica { opacity: 1; }

.browser { display: none; }

/* --------------------------------------------------------------------------
   Solução — três frentes
   -------------------------------------------------------------------------- */
.solucao { padding: 72px 0; border-top: 1px solid var(--linha); background: var(--papel); }
.solucao__cab .eyebrow { margin-bottom: 18px; }
.solucao__cab .display { max-width: 20ch; }
.solucao__nota { margin-top: 16px; color: var(--grafite); max-width: 50ch; }
.frentes { margin-top: 40px; display: grid; gap: 14px; }
.frente { background: var(--creme); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 24px 28px; position: relative; }
.frente--destaque { background: var(--preto); color: var(--creme); border-color: var(--preto); }
.frente__ico { width: 34px; height: 34px; color: var(--azul); margin-bottom: 18px; }
.frente--destaque .frente__ico { color: var(--azul-claro); }
.frente h3 { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.08; }
.frente p { margin-top: 12px; color: var(--grafite); font-size: 0.98rem; }
.frente--destaque p { color: var(--cinza-claro); }
.frente__lista { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); display: grid; gap: 8px; font-size: 0.9rem; }
.frente--destaque .frente__lista { border-color: var(--linha-escura); }
.frente__lista li { position: relative; padding-left: 16px; }
.frente__lista li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--azul); }
.frente--destaque .frente__lista li::before { background: var(--coral); }
.solucao__voce { margin-top: 28px; padding: 18px 22px; border-left: 3px solid var(--azul); background: var(--creme); font-size: 1rem; color: var(--grafite); }
.solucao__voce strong { color: var(--preto); }

/* --------------------------------------------------------------------------
   Projetos — pilha de cards
   -------------------------------------------------------------------------- */
.projetos { padding: 72px 0 40px; }
.projetos__cab { padding-bottom: 28px; }
.projetos__cab .eyebrow { margin-bottom: 18px; }
.projetos__cab .display { max-width: 18ch; }
.projetos__nota { margin-top: 16px; color: var(--grafite); max-width: 50ch; }

.pilha { display: grid; gap: 16px; }
.card { border-radius: var(--raio); border: 1px solid var(--linha); background: var(--papel); }
.card--escuro { background: var(--preto); color: var(--creme); border-color: var(--preto); }
.card__in { padding: 26px 22px 30px; display: grid; gap: 26px; grid-template-areas: "cab" "palco" "corpo"; }
.card__cab { grid-area: cab; }
.card__corpo { grid-area: corpo; }
.card__in .palco { grid-area: palco; }
.card__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.card__seg { font-family: var(--fonte-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grafite); }
.card--escuro .card__seg { color: var(--cinza-claro); }
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fonte-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--linha); }
.card--escuro .status { border-color: var(--linha-escura); }
.status--ar i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.status--ar i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral); opacity: .5; animation: pulsa 2s infinite; }
@keyframes pulsa { to { transform: scale(3); opacity: 0; } }
.card__nome { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-size: clamp(2rem, 7.6vw, 3.6rem); }
.card__nome span { display: block; font-weight: 500; font-size: 0.48em; letter-spacing: -0.01em; color: var(--grafite); margin-top: 8px; }
.card--escuro .card__nome span { color: var(--cinza-claro); }
.card__desc { color: var(--grafite); max-width: 48ch; font-size: 1rem; }
.card--escuro .card__desc { color: var(--cinza-claro); }
.tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-family: var(--fonte-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--linha); padding: 6px 10px; border-radius: 999px; }
.card--escuro .tags li { border-color: var(--linha-escura); color: var(--cinza-claro); }
.card__acoes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }

.palco { position: relative; display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   Método — linha do tempo
   -------------------------------------------------------------------------- */
.metodo { background: var(--preto); color: var(--creme); padding: 80px 0; }
.metodo__in { display: grid; gap: 44px; }
.metodo__fixo .eyebrow { margin-bottom: 18px; }
.metodo__fixo .display { max-width: 18ch; }
.metodo__fixo .display em { color: var(--azul-claro); }
.metodo__sub { margin-top: 18px; color: var(--cinza-claro); max-width: 44ch; }
.metodo__fixo .btn { margin-top: 26px; }

.etapas { position: relative; padding-left: 34px; }
.etapas::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--linha-escura); }
.etapas::after { content: ""; position: absolute; left: 10px; top: 0; width: 1px; height: var(--preenchido, 0px); background: var(--azul-claro); transition: height .15s linear; }
.etapa { position: relative; padding: 0 0 40px; opacity: .5; transform: translateX(6px); transition: opacity .5s, transform .5s; }
.etapa.is-ativa { opacity: 1; transform: none; }
.etapa:last-child { padding-bottom: 0; }
.etapa::before { content: ""; position: absolute; left: -29px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--preto); border: 1px solid var(--linha-escura); transition: background .4s, border-color .4s, box-shadow .4s; }
.etapa.is-ativa::before { background: var(--azul-claro); border-color: var(--azul-claro); box-shadow: 0 0 0 4px rgba(108,133,255,.2); }
.etapa__n { font-family: var(--fonte-titulo); font-weight: 800; font-size: 0.95rem; color: var(--cinza-claro); letter-spacing: 0; transition: color .4s; }
.etapa.is-ativa .etapa__n { color: var(--azul-claro); }
.etapa__corpo h3 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; }
.etapa__corpo p { margin-top: 10px; color: var(--cinza-claro); max-width: 48ch; }
.etapa__quem { margin-top: 16px; display: grid; gap: 8px; font-size: 0.88rem; }
.etapa__quem div { display: flex; gap: 10px; align-items: baseline; }
.etapa__quem dt { font-family: var(--fonte-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza-claro); flex: none; width: 58px; }
.etapa__quem dd { color: var(--creme); }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.cta { padding: 84px 0; }
.cta .eyebrow { margin-bottom: 18px; }
.cta .display { max-width: 16ch; font-size: clamp(2.2rem, 7.6vw, 4.6rem); }
.cta__texto { margin-top: 22px; color: var(--grafite); max-width: 52ch; font-size: 1.05rem; }
.cta__acoes { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta__nota { font-family: var(--fonte-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grafite); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--preto); background: var(--papel); padding-bottom: 96px; }
.rodape__in { padding-top: 44px; padding-bottom: 36px; display: grid; gap: 32px; }
.rodape__marca p { margin-top: 14px; color: var(--grafite); max-width: 40ch; font-size: 0.95rem; }
.rodape__selo { font-family: var(--fonte-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--preto) !important; }
.rodape__links { display: grid; gap: 4px; align-content: start; }
.rodape__links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--linha); }
.rodape__links a:hover { color: var(--azul); }
.rodape__links .ico { width: 16px; height: 16px; }
.rodape__base { border-top: 1px solid var(--linha); padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-family: var(--fonte-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--grafite); }

/* --------------------------------------------------------------------------
   Barra fixa (só celular)
   -------------------------------------------------------------------------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--preto); color: var(--creme);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.barra__txt { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.barra .btn__txt { display: inline; }
.barra.is-visivel { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Aparecer ao rolar. Só esconde quando há JS (html.js); sem JS tudo aparece.
   Se o observador não rodar, o próprio JS libera tudo depois de 2,5 s.
   -------------------------------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
html.js .reveal.is-visivel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .topo .btn__txt { display: inline; }
  .topo .btn--pq { padding: 0 16px; }
  .hero { padding: 80px 0 72px; }
  .hero__palco { height: 420px; }
  .hero__palco .phone { width: 190px; }
  .hero__palco .phone--esq, .hero__palco .phone--dir { width: 168px; }
  .provas { grid-template-columns: repeat(3, auto); gap: 10px 26px; }
  .frentes { grid-template-columns: repeat(3, 1fr); }
  .frente { padding: 30px 26px 32px; }
  .rodape { padding-bottom: 0; }
  .rodape__in { grid-template-columns: 1.2fr 1fr; }
  .barra { display: none; }
  .cta__acoes { flex-direction: row; align-items: center; gap: 20px; }
  .etapas { padding-left: 46px; }
  .etapas::before, .etapas::after { left: 14px; }
  .etapa::before { left: -37px; }
  .etapa__quem { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {
  :root { --gutter: 40px; --topo-h: 72px; }
  .topo__nav { display: flex; }

  .hero { padding: 96px 0 88px; }
  .hero__in { grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 32px; }
  .hero__palco { height: 520px; }
  .hero__palco .phone { width: 220px; }
  .hero__palco .phone--esq, .hero__palco .phone--dir { width: 196px; bottom: 20px; }

  .solucao { padding: 96px 0; }
  .frentes { margin-top: 48px; gap: 18px; }
  .solucao__voce { display: inline-block; margin-top: 32px; }

  .projetos { padding: 104px 0 64px; }
  .pilha { display: block; }
  /* cada card gruda no topo; o próximo desliza por cima (position: sticky,
     sem prender a rolagem). O JS só encolhe de leve o card que fica atrás. */
  .card { position: sticky; top: calc(var(--topo-h) + 20px); margin-bottom: 20px; min-height: calc(100vh - var(--topo-h) - 40px); display: flex; transform: scale(var(--encolhe, 1)); transform-origin: top center; }
  /* as duas linhas vazias (1fr) em cima e embaixo centralizam o texto na
     vertical, ao lado do palco, sem abrir espaço entre título e descrição */
  .card__in { flex: 1; padding: 44px 48px 48px; grid-template-columns: 5fr 7fr; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". palco" "cab palco" "corpo palco" ". palco"; column-gap: 48px; row-gap: 0; }
  .card__corpo { padding-top: 18px; }
  .card__in .palco { align-self: center; }
  .card__nome { font-size: clamp(2.6rem, 3.6vw, 3.8rem); }

  /* palco desktop: tela grande + celular sobreposto no canto, com leve perspectiva */
  .palco { display: block; padding-bottom: 56px; }
  .browser { display: block; width: 100%; border: 1px solid var(--linha); background: var(--papel); border-radius: 12px; overflow: hidden; }
  .card--escuro .browser { border-color: var(--linha-escura); background: var(--preto-2); }
  .browser__bar { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--linha); }
  .card--escuro .browser__bar { border-color: var(--linha-escura); }
  .browser__dots { display: inline-flex; gap: 5px; }
  .browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha); display: block; }
  .card--escuro .browser__dots i { background: #3a3a3a; }
  .browser__url { flex: 1; text-align: center; font-family: var(--fonte-mono); font-size: 0.72rem; color: var(--grafite); background: var(--creme); padding: 4px 12px; border-radius: 6px; letter-spacing: 0.02em; }
  .card--escuro .browser__url { background: #2a2a2a; color: var(--cinza-claro); }
  .browser__screen { aspect-ratio: 1280 / 800; background: #1a1a1a; position: relative; }
  .browser__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

  .palco .phone { position: absolute; right: -2%; bottom: 0; width: 27%; padding: 7px; border-radius: 30px; transform: translateY(0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .card:hover .palco .phone { transform: translateY(-10px); }
  .palco .phone__screen { border-radius: 23px; }
  .palco .phone__island { top: 8px; height: 16px; width: 30%; }
  .palco .phone__dica { font-size: 0.58rem; padding: 6px 9px; bottom: 10px; }

  .metodo { padding: 112px 0; }
  .metodo__in { grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
  .metodo__fixo { position: sticky; top: calc(var(--topo-h) + 40px); }
  .etapa { padding-bottom: 52px; }

  .cta { padding: 120px 0; }
  .cta__in { max-width: 980px; }
}

@media (min-width: 1280px) {
  .palco .phone { width: 26%; }
}

/* --------------------------------------------------------------------------
   Menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .display .linha > span { transform: none; animation: none; }
  .btn, .btn .ico--fim, .palco .phone, .etapa { transition: none; }
  .status--ar i::after { animation: none; }
  .card { transform: none !important; }
  .etapa { opacity: 1; transform: none; }
}