/* ==========================================================================
   EXPRESS PRINTS — sistema visual
   --------------------------------------------------------------------------
   Tudo vem da oficina: as quatro tintas de processo (que já estão no logotipo
   do cliente), a retícula de meio-tom, os ângulos de tela do offset, a tira de
   controle de cor na borda da folha e o tipo condensado pesado do cartaz
   tipográfico. Nada de moodboard genérico.
   ========================================================================== */

:root {
  /* tintas */
  --ciano:    #00b4e6;
  --magenta:  #ff0a8c;
  --amarelo:  #ffd900;

  /* substrato */
  --breu:     #08080a;   /* preto de impressão */
  --carvao:   #131317;
  --carvao-2: #1d1d22;
  --papel:    #f1f0ec;
  --branco:   #ffffff;

  /* texto de apoio */
  --fumaca:   #8a8a94;   /* sobre escuro */
  --grafite:  #56565e;   /* sobre claro */
  --fio-esc:  #26262c;
  --fio-clr:  #d6d4cd;

  /* tipografia */
  --cartaz: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --texto:  "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  --dado:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* métrica */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --largura: 1440px;
  --ritmo: clamp(5rem, 11vw, 11rem);
}

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

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

body {
  margin: 0;
  background: var(--breu);
  color: var(--papel);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
canvas { display: block; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--cartaz);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 4px;
}

::selection { background: var(--magenta); color: var(--branco); }

.pular {
  position: absolute; left: 1rem; top: -8rem; z-index: 300;
  padding: 0.85rem 1.4rem;
  background: var(--amarelo); color: var(--breu);
  font-family: var(--dado); font-size: 0.8125rem; font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.pular:focus { top: 1rem; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   grade e blocos
   -------------------------------------------------------------------------- */

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

.secao { padding-block: var(--ritmo); position: relative; }
:is(.secao--papel, .bandeja, .chamada) { background: var(--papel); color: var(--breu); }

/* etiqueta técnica — a voz da ordem de serviço */
.tag {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1.5rem;
  font-family: var(--dado);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fumaca);
}
.tag::before {
  content: ""; width: 1.75rem; height: 2px;
  background: var(--magenta);
}
:is(.secao--papel, .bandeja, .chamada) .tag { color: var(--grafite); }

.titulo-secao {
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  max-width: 16ch;
}

.intro {
  max-width: 46ch;
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--fumaca);
}
:is(.secao--papel, .bandeja, .chamada) .intro { color: var(--grafite); }

/* --------------------------------------------------------------------------
   assinatura 1 — registro CMY
   As chapas chegam fora de esquadro e entram em registro. É a ideia que o
   logotipo do cliente já carrega nos rastros coloridos.
   -------------------------------------------------------------------------- */

.reg { position: relative; display: block; }
.reg__linha { position: relative; display: block; }
.reg__k { position: relative; display: block; }

.reg__canal {
  position: absolute; inset: 0; display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}
.reg__canal[data-canal="c"] { color: #0070a0; }
.reg__canal[data-canal="m"] { color: #a0004f; }
.reg__canal[data-canal="y"] { color: #8a7500; }

:is(.secao--papel, .bandeja, .chamada) .reg__canal { mix-blend-mode: multiply; }
:is(.secao--papel, .bandeja, .chamada) .reg__canal[data-canal="c"] { color: var(--ciano); }
:is(.secao--papel, .bandeja, .chamada) .reg__canal[data-canal="m"] { color: var(--magenta); }
:is(.secao--papel, .bandeja, .chamada) .reg__canal[data-canal="y"] { color: var(--amarelo); }

/* --------------------------------------------------------------------------
   navegação
   -------------------------------------------------------------------------- */

.topo {
  position: fixed; inset: 0 0 auto; z-index: 200;
  transition: background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.topo[data-fixo="sim"] {
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--fio-esc);
}

.topo__env { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; }

.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.marca__sinal {
  height: 2rem; width: auto;
  /* o JPG tem fundo branco chapado: screen no escuro derruba o branco */
  mix-blend-mode: screen;
}
.marca__nome {
  font-family: var(--cartaz); font-weight: 800; font-size: 1.5rem;
  letter-spacing: 0.005em; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
}

.topo__menu { display: flex; align-items: center; gap: 2rem; margin-left: auto; list-style: none; padding: 0; }

.topo__link {
  position: relative;
  font-family: var(--dado); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding-block: 0.4rem; white-space: nowrap;
  color: var(--fumaca);
  transition: color 0.3s;
}
.topo__link:hover, .topo__link[aria-current="page"] { color: var(--papel); }
.topo__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--magenta);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.topo__link:hover::after, .topo__link[aria-current="page"]::after { transform: scaleX(1); }

.topo__cta {
  flex: none; margin-left: 0.5rem;
  padding: 0.7rem 1.2rem;
  background: var(--amarelo); color: var(--breu);
  font-family: var(--dado); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.06em; text-decoration: none;
  transition: background 0.3s, transform 0.3s;
}
.topo__cta:hover { background: var(--branco); transform: translateY(-2px); }

.topo__burguer {
  display: none; flex: none; margin-left: auto;
  width: 3rem; height: 3rem; padding: 0;
  background: none; border: 1px solid var(--fio-esc); cursor: pointer;
}
.topo__burguer span {
  display: block; width: 1.25rem; height: 2px; margin: 0.32rem auto;
  background: var(--papel);
  transition: transform 0.35s, opacity 0.2s;
}
.topo__burguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.47rem) rotate(45deg); }
.topo__burguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo__burguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.47rem) rotate(-45deg); }

@media (max-width: 960px) {
  .topo__burguer { display: block; }
  .topo__menu {
    position: fixed; inset: 5rem 0 auto; z-index: -1;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 1rem var(--gutter) 2rem;
    background: var(--breu);
    border-bottom: 1px solid var(--fio-esc);
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0.45s;
  }
  .topo__menu[data-aberto="sim"] { transform: translateY(0); visibility: visible; transition-delay: 0s, 0s; }
  .topo__link {
    display: block; padding-block: 1rem;
    border-bottom: 1px solid var(--fio-esc);
    font-size: 1rem; color: var(--papel);
  }
  .topo__link::after { display: none; }
  .topo__cta { display: none; }
}

/* --------------------------------------------------------------------------
   HERO — a separação na mesa de luz
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: 8rem 3rem;
  overflow: hidden;
}

.hero__tela { position: absolute; inset: 0; z-index: 0; }
.hero__tela canvas { width: 100%; height: 100%; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
/* sem JS ou sem canvas, a foto assume o lugar */
.sem-js .hero__foto { opacity: 0.4; }

.hero__veu {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.95) 0%, rgba(8,8,10,0.82) 30%, rgba(8,8,10,0.28) 58%, rgba(8,8,10,0) 76%),
    linear-gradient(0deg, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0) 46%);
  pointer-events: none;
}

/* No celular não há coluna lateral: o véu passa a ser só vertical, senão
   apaga justamente a parte da retícula que dá para ver. */
@media (max-width: 760px) {
  .hero { min-height: 92svh; padding-block: 6.5rem 2.25rem; }
  .hero__veu {
    background:
      linear-gradient(0deg, rgba(8,8,10,0.96) 0%, rgba(8,8,10,0.86) 34%, rgba(8,8,10,0.3) 62%, rgba(8,8,10,0.55) 100%);
  }
}

.hero__env { position: relative; z-index: 2; width: 100%; }
/* o véu dá o clima, a sombra garante a leitura ponto a ponto sobre a retícula */
.hero__ficha,
.hero__lead,
.hero__titulo .fina { text-shadow: 0 1px 14px rgba(8, 8, 10, 0.92); }

.hero__ficha {
  display: flex; flex-wrap: wrap; gap: 0.45rem 1.4rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 0; list-style: none;
  font-family: var(--dado); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: #b4b2ab;
}
.hero__ficha li { display: flex; align-items: center; gap: 1.4rem; }
.hero__ficha li + li::before { content: ""; width: 5px; height: 5px; background: var(--ciano); }

.hero__titulo {
  font-size: clamp(2.9rem, 10.5vw, 9.5rem);
  line-height: 0.82;
  letter-spacing: -0.015em;
}
.hero__titulo .fina {
  display: block;
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.3em;
}
.hero__titulo .fina .reg__k { color: #d8d6cf; }

.hero__base {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 2rem clamp(2rem, 6vw, 5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.hero__lead { max-width: 40ch; color: #b4b2ab; font-size: clamp(1rem, 1.3vw, 1.1875rem); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__rolar {
  position: absolute; right: var(--gutter); bottom: 2.5rem; z-index: 2;
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--dado); font-size: 0.6875rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fumaca);
}
.hero__rolar i {
  display: block; width: 1px; height: 3rem;
  background: linear-gradient(var(--fumaca), transparent);
}
@media (max-width: 960px) { .hero__rolar { display: none; } }

/* --------------------------------------------------------------------------
   botões
   -------------------------------------------------------------------------- */

.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--papel);
  background: var(--papel); color: var(--breu);
  font-family: var(--dado); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color 0.35s, border-color 0.35s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover { color: var(--branco); border-color: var(--magenta); }
.btn:hover::before { transform: translateY(0); }
.btn i { font-style: normal; transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1); }
.btn:hover i { transform: translateX(0.4rem); }

.btn--fantasma { background: none; color: var(--papel); border-color: var(--fio-esc); }
.btn--fantasma:hover { color: var(--branco); }
:is(.secao--papel, .bandeja, .chamada) .btn--fantasma { color: var(--breu); border-color: var(--fio-clr); }
:is(.secao--papel, .bandeja, .chamada) .btn--fantasma:hover { color: var(--branco); }

.btn--tinta { background: var(--amarelo); border-color: var(--amarelo); color: var(--breu); }

/* --------------------------------------------------------------------------
   esteira — o papel correndo na máquina
   -------------------------------------------------------------------------- */

.esteira {
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--fio-esc);
  background: var(--carvao);
}
.esteira__trilho { display: flex; width: max-content; will-change: transform; }
.esteira__grupo { display: flex; align-items: center; flex: none; }
.esteira__item {
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--cartaz); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1;
  color: var(--papel); white-space: nowrap;
}
.esteira__item b { font-weight: 700; }
.esteira__ponto { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.esteira__item:nth-child(4n+1) .esteira__ponto { background: var(--ciano); }
.esteira__item:nth-child(4n+2) .esteira__ponto { background: var(--magenta); }
.esteira__item:nth-child(4n+3) .esteira__ponto { background: var(--amarelo); }
.esteira__item:nth-child(4n+4) .esteira__ponto { background: var(--papel); }

/* --------------------------------------------------------------------------
   serviços — bandeja horizontal presa ao scroll
   -------------------------------------------------------------------------- */

.bandeja { position: relative; background: var(--papel); color: var(--breu); overflow: hidden; }
.bandeja__cabeca { padding-block: var(--ritmo) 0; overflow-x: clip; }

.bandeja__palco { padding-block: clamp(2.5rem, 5vw, 4rem) var(--ritmo); }
.bandeja__trilho {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--gutter);
  width: max-content;
}

/* Com o pin ligado, o palco ocupa a tela inteira e centra o trilho: assim os
   cartões não passam por baixo da barra fixa nem sobra meia tela vazia. */
@media (min-width: 981px) {
  .bandeja__palco {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    gap: 2.5rem;
    padding-block: 7rem 3.5rem;
  }
}

/* Sem pin não há como alcançar os cartões de fora da tela: o palco vira uma
   faixa rolável com encaixe, que é o gesto natural no toque. */
@media (max-width: 980px) {
  .bandeja__palco {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 0 clamp(2.5rem, 6vw, 4rem);
  }
  .bandeja__palco::-webkit-scrollbar { display: none; }
  .ficha-serv { scroll-snap-align: center; }
  .bandeja__barra { display: none; }
}

.ficha-serv {
  position: relative; flex: none;
  width: min(30rem, 78vw);
  background: var(--branco);
  border: 1px solid var(--fio-clr);
  display: flex; flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.ficha-serv:hover { border-color: var(--breu); transform: translateY(-6px); }

.ficha-serv__quadro {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--branco);
  overflow: hidden;
}
.ficha-serv__quadro canvas { width: 100%; height: 100%; }
.ficha-serv__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.55s ease;
}
/* ao passar o ponteiro a prova sai da retícula e vira foto */
.ficha-serv:hover .ficha-serv__foto { opacity: 1; }

.ficha-serv__num {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 0.5rem 0.8rem;
  background: var(--breu); color: var(--papel);
  font-family: var(--dado); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em;
}

.ficha-serv__corpo { padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.ficha-serv__nome { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
.ficha-serv__txt { font-size: 0.9375rem; color: var(--grafite); flex: 1; margin: 0; }
.ficha-serv__ir {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--dado); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ficha-serv__ir i { font-style: normal; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
.ficha-serv:hover .ficha-serv__ir i { transform: translateX(0.45rem); }

.bandeja__barra {
  height: 2px; background: var(--fio-clr);
  margin: 0 var(--gutter);
}
.bandeja__barra span { display: block; height: 100%; width: 12%; background: var(--breu); transform-origin: left; }

/* --------------------------------------------------------------------------
   números
   -------------------------------------------------------------------------- */

.provas { display: grid; gap: 1px; background: var(--fio-esc); border-block: 1px solid var(--fio-esc); }
@media (min-width: 640px) { .provas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .provas { grid-template-columns: repeat(4, 1fr); } }

.prova {
  background: var(--breu);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: background 0.4s;
}
.prova:hover { background: var(--carvao); }
.prova__n {
  font-family: var(--cartaz); font-weight: 800; line-height: 0.85;
  font-size: clamp(3.25rem, 7vw, 5.5rem); text-transform: uppercase;
}
.prova:nth-child(1) .prova__n { color: var(--ciano); }
.prova:nth-child(2) .prova__n { color: var(--magenta); }
.prova:nth-child(3) .prova__n { color: var(--amarelo); }
.prova:nth-child(4) .prova__n { color: var(--papel); }
.prova__t { font-size: 0.9375rem; color: var(--fumaca); margin: 0; }

/* --------------------------------------------------------------------------
   empresa
   -------------------------------------------------------------------------- */

.dupla { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 980px) { .dupla { grid-template-columns: 1fr 1fr; } }

.moldura { position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: var(--branco); }
.moldura canvas { width: 100%; height: 100%; }
.moldura__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.7s ease;
}
.moldura:hover .moldura__foto { opacity: 1; }
.moldura__nota {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 0.55rem 0.9rem;
  background: var(--breu); color: var(--papel);
  font-family: var(--dado); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}

.lista-marcada { margin: 2rem 0 0; padding: 0; list-style: none; }
.lista-marcada li {
  position: relative; padding: 0.9rem 0 0.9rem 2rem;
  border-top: 1px solid var(--fio-esc);
  font-size: 1rem;
}
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: 1.45rem;
  width: 0.6rem; height: 0.6rem; background: var(--ciano);
}
.lista-marcada li:nth-child(2)::before { background: var(--magenta); }
.lista-marcada li:nth-child(3)::before { background: var(--amarelo); }
:is(.secao--papel, .bandeja, .chamada) .lista-marcada li { border-color: var(--fio-clr); }

/* --------------------------------------------------------------------------
   downloads
   -------------------------------------------------------------------------- */

.baixa { display: grid; gap: 1px; background: var(--fio-esc); border: 1px solid var(--fio-esc); margin: 2.5rem 0 0; padding: 0; list-style: none; }
:is(.secao--papel, .bandeja, .chamada) .baixa { background: var(--fio-clr); border-color: var(--fio-clr); }

.baixa__link {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  padding: 1.35rem clamp(1.1rem, 3vw, 1.9rem);
  background: var(--breu); text-decoration: none;
  transition: background 0.35s, padding-left 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
:is(.secao--papel, .bandeja, .chamada) .baixa__link { background: var(--branco); }
.baixa__link:hover { background: var(--carvao); padding-left: clamp(1.5rem, 3.6vw, 2.5rem); }
:is(.secao--papel, .bandeja, .chamada) .baixa__link:hover { background: var(--papel); }
.baixa__nome { font-family: var(--cartaz); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.baixa__meta { margin-left: auto; font-family: var(--dado); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--fumaca); }
:is(.secao--papel, .bandeja, .chamada) .baixa__meta { color: var(--grafite); }

/* --------------------------------------------------------------------------
   conversa — o orçamento sai pelo WhatsApp
   O verde é o do WhatsApp de propósito: aqui ele não é enfeite, é o sinal que
   a pessoa procura na tela. Fora isso, a paleta segue sendo a das tintas.
   -------------------------------------------------------------------------- */

:root { --zap: #25d366; --zap-esc: #128c4a; }

.conversa { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 980px) { .conversa { grid-template-columns: 1.15fr 0.85fr; } }

.atalhos {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 2.25rem 0 0; padding: 0; list-style: none;
}

.atalho {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.15rem;
  background: var(--carvao); border: 1px solid var(--fio-esc);
  color: var(--papel);
  font-family: var(--dado); font-size: 0.8125rem; letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.atalho:hover { border-color: var(--zap); background: var(--carvao-2); transform: translateY(-2px); }
.atalho::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--zap); flex: none;
}
:is(.secao--papel, .bandeja, .chamada) .atalho { background: var(--branco); border-color: var(--fio-clr); color: var(--breu); }

.btn--zap { background: var(--zap); border-color: var(--zap); color: #07130c; }
.btn--zap::before { background: var(--zap-esc); }
.btn--zap:hover { color: var(--branco); border-color: var(--zap-esc); }

.zapsvg { width: 1.15rem; height: 1.15rem; flex: none; fill: currentColor; }

.cartao {
  background: var(--carvao); border: 1px solid var(--fio-esc);
  padding: clamp(1.5rem, 3vw, 2.25rem); margin: 0;
}
.cartao__linha { padding-block: 1rem; border-bottom: 1px solid var(--fio-esc); }
.cartao__linha:first-child { padding-top: 0; }
.cartao__linha:last-child { border-bottom: 0; padding-bottom: 0; }
.cartao__rot { margin: 0 0 0.35rem; font-family: var(--dado); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fumaca); }
.cartao__val { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.cartao__val a { text-decoration: none; border-bottom: 1px solid var(--fio-esc); transition: border-color 0.3s; }
.cartao__val a:hover { border-color: var(--zap); }

/* --------------------------------------------------------------------------
   botão flutuante
   -------------------------------------------------------------------------- */

.zapfab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 180;
  display: inline-flex; align-items: center; gap: 0;
  height: 3.5rem; padding: 0 1rem;
  background: var(--zap); color: #07130c;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.92);
  transition: opacity 0.45s, transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
              visibility 0s linear 0.45s, background 0.3s, gap 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.zapfab[data-visivel="sim"] {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}
.zapfab:hover, .zapfab:focus-visible { background: #1fbe5a; gap: 0.6rem; }

.zapfab__glifo { display: flex; width: 1.5rem; height: 1.5rem; flex: none; }
.zapfab__glifo svg { width: 100%; height: 100%; fill: currentColor; }

/* o rótulo abre no hover; no toque o botão fica só com o glifo */
.zapfab__txt {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--dado); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.04em;
  transition: max-width 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.zapfab:hover .zapfab__txt, .zapfab:focus-visible .zapfab__txt { max-width: 12rem; }

/* pulso discreto uma vez, quando aparece */
.zapfab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--zap);
  opacity: 0; pointer-events: none;
}
.zapfab[data-visivel="sim"]::after { animation: pulso 2.4s ease-out 0.6s 2; }
@keyframes pulso {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* --------------------------------------------------------------------------
   páginas internas
   -------------------------------------------------------------------------- */

/* a âncora não pode parar embaixo da barra fixa */
section[id] { scroll-margin-top: 6.5rem; }

/* volta para a seção de onde a pessoa saiu */
.cabecalho-interno {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.9rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.voltar {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 1.05rem 0.62rem 0.85rem;
  border: 1px solid var(--fio-esc);
  background: var(--carvao);
  color: var(--papel);
  font-family: var(--dado); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.voltar:hover { border-color: var(--amarelo); background: var(--carvao-2); }
.voltar__seta {
  display: inline-block; font-style: normal; line-height: 1;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.voltar:hover .voltar__seta { transform: translateX(-0.35rem); }


.capa {
  padding-block: clamp(8rem, 14vw, 12rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
  /* trava de segurança para o deslocamento das chapas durante o registro */
  overflow-x: clip;
}
.capa__titulo { font-size: clamp(3rem, 11vw, 9rem); }

.trilha {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.75rem; padding: 0; list-style: none;
  font-family: var(--dado); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fumaca);
}
.trilha a { text-decoration: none; border-bottom: 1px solid var(--fio-esc); }
.trilha a:hover { border-color: var(--magenta); color: var(--papel); }

.conteudo { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 980px) { .conteudo { grid-template-columns: 1.05fr 0.95fr; } }
.conteudo--solo { grid-template-columns: 1fr; max-width: 64ch; }
@media (min-width: 980px) { .conteudo--solo { grid-template-columns: 1fr; } }

.prosa { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--fumaca); max-width: 60ch; }
.prosa strong { color: var(--papel); font-weight: 600; }

.vizinhos { display: grid; gap: 1px; background: var(--fio-esc); border: 1px solid var(--fio-esc); }
@media (min-width: 720px) { .vizinhos { grid-template-columns: repeat(2, 1fr); } }
.vizinhos__link {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--breu); text-decoration: none;
  transition: background 0.35s;
}
.vizinhos__link:hover { background: var(--carvao); }
.vizinhos__rot { font-family: var(--dado); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fumaca); }
.vizinhos__nome { font-family: var(--cartaz); font-size: 2rem; font-weight: 800; text-transform: uppercase; line-height: 1; }

/* faixa de chamada no fim das internas — o tema vem de .secao--papel, que já
   acerta tag, intro e botões; aqui fica só o que é próprio dela */
.chamada__titulo { font-size: clamp(2.5rem, 7vw, 6rem); max-width: 14ch; }

/* --------------------------------------------------------------------------
   rodapé
   -------------------------------------------------------------------------- */

.rodape { background: var(--breu); border-top: 1px solid var(--fio-esc); padding-top: clamp(3.5rem, 7vw, 6rem); }
.rodape__grade { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 780px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; } }

.rodape__marca { font-family: var(--cartaz); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; text-transform: uppercase; line-height: 0.9; margin-bottom: 1.25rem; }
.rodape__end { font-family: var(--dado); font-size: 0.8125rem; line-height: 1.9; color: var(--fumaca); }
.rodape__end a { text-decoration: none; border-bottom: 1px solid var(--fio-esc); }
.rodape__end a:hover { color: var(--papel); border-color: var(--amarelo); }

.rodape__rot { font-family: var(--dado); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fumaca); margin-bottom: 1.1rem; }
.rodape__lista { margin: 0; padding: 0; list-style: none; }
.rodape__lista li + li { margin-top: 0.65rem; }
.rodape__lista a { text-decoration: none; color: var(--fumaca); transition: color 0.3s; font-size: 0.9375rem; }
.rodape__lista a:hover { color: var(--papel); }

.rodape__fim {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  padding-right: 5rem;
  padding-block: 1.5rem; border-top: 1px solid var(--fio-esc);
  font-family: var(--dado); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fumaca);
}

/* tira de controle de cor — o que a gráfica imprime na borda da folha */
.tira { display: flex; gap: 2px; padding: 2px; background: var(--fio-esc); }
.tira span { flex: 1; height: 7px; }

/* --------------------------------------------------------------------------
   movimento reduzido — a página chega pronta, parada e legível
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reg__canal { display: none; }
  .esteira__trilho { transform: none !important; }
  .hero__foto { opacity: 0.45 !important; }
  .ficha-serv__foto, .moldura__foto { opacity: 1 !important; }
  .bandeja__trilho { flex-wrap: wrap; width: auto; justify-content: center; }
  .ficha-serv { width: min(30rem, 100%); }
  .zapfab { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .zapfab::after { animation: none !important; }
}