/* =====================================================================
   Adans Santos — portfólio
   Paleta preto e vermelho. O vermelho é um só, escolhido para passar
   contraste AA com texto branco; existe uma versão mais clara só para texto
   sobre preto e uma mais escura só para texto sobre o fundo claro.
   ===================================================================== */

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --preto: #0B0B0C;          /* topo, rodapé, texto */
  --grafite: #1A1A1C;        /* painéis sobre o preto */
  --branco: #F5F5F3;         /* fundo das seções claras */
  --superficie: #E6E6E2;     /* superfícies secundárias */
  --vermelho: #D7221A;       /* campo e botão com texto branco (5,1:1) */
  --vermelho-vivo: #FF4A3D;  /* texto vermelho sobre preto (5,9:1) */
  --vermelho-texto: #B01C14; /* texto vermelho sobre branco (6,4:1) */
  --cinza: #585858;          /* texto secundário sobre branco (6,5:1) */
  --cinza-claro: #B9B9B9;    /* texto secundário sobre preto (10:1) */
  --linha: #D6D6D2;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --texto: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margem: clamp(1rem, 4vw, 3rem);
  --largura: 88rem;
  --raio: 8px;
  --foco: var(--preto);
  /* mesma borda esquerda/direita para todas as faixas, em qualquer largura */
  --borda: max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: var(--margem); top: -4rem; z-index: 10;
  background: var(--vermelho); color: #fff; padding: 0.6rem 1rem; font-weight: 700;
  border-radius: var(--raio);
}
.pular:focus { top: 0.75rem; }

/* ---------- partes escuras ---------- */
.topo, .hero, .contato, .rodape, .case__visual--fluxo { --foco: #fff; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  border-radius: 6px; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent;
  transition: background-color 0.15s, color 0.15s;
}
.btn--primaria { background: var(--vermelho); color: #fff; }
.btn--primaria:hover { background: #B81C15; }
.btn--linha { border-color: var(--branco); color: var(--branco); }
.btn--linha:hover { background: var(--branco); color: var(--preto); }
/* ---------- ícones (SVG embutido, cor herdada do texto) ---------- */
.icone { width: 1.25rem; height: 1.25rem; flex: none; }
.btn--icone { gap: 0.6rem; }
.link-icone { display: inline-flex; align-items: center; gap: 0.4rem; }
.link-icone .icone { width: 1.1em; height: 1.1em; }

/* ---------- topo ---------- */
.topo {
  background: var(--preto); color: var(--branco);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem;
  padding: 1rem var(--borda);
}
.topo__nome {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1;
  text-decoration: none; margin-right: auto;
}
.topo__nav { display: flex; gap: 1.5rem; order: 3; width: 100%; overflow-x: auto; padding: 0.4rem 0.3rem; margin: -0.4rem -0.3rem; }
.topo__nav a, .topo__lang { text-decoration: none; font-weight: 500; padding: 0.35rem 0; white-space: nowrap; }
.topo__nav a:hover, .topo__lang:hover { text-decoration: underline; }
.topo__lang { display: inline-flex; align-items: center; gap: 0.4rem; }
.topo__lang span { border-bottom: 1px solid currentColor; }
.topo__lang .icone { width: 1.1rem; height: 1.1rem; }
@media (min-width: 48em) {
  .topo__nav { order: 0; width: auto; overflow: visible; }
  .topo__nome { margin-right: 0; }
  .topo__nav { margin-left: auto; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--preto); color: var(--branco);
  display: grid; gap: 2.5rem;
  padding: clamp(2rem, 6vw, 4rem) var(--borda) 4.5rem;
  overflow: hidden;
}
.hero__nome {
  font-family: var(--display); font-weight: 900;
  font-size: min(27vw, 13rem); line-height: 0.86; letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-left: -0.04em;
}
.hero__nome span { display: block; }
.hero__papel {
  margin-top: 1.25rem; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.1; color: var(--vermelho-vivo);
}
.hero__lead { margin-top: 0.75rem; max-width: 34ch; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__redes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.btn--pequeno {
  min-height: 2.75rem; padding: 0.5rem 0.75rem; gap: 0.45rem;
  font-size: 0.9375rem; font-weight: 500; border-width: 1px;
  border-color: rgba(245, 245, 243, 0.45);
}
.btn--pequeno .icone { width: 1.1rem; height: 1.1rem; }
.btn--pequeno:hover { border-color: var(--branco); }
@media (max-width: 24em) { .btn--pequeno { font-size: 0.875rem; padding: 0.5rem 0.6rem; gap: 0.35rem; } }
.hero__remoto {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1.75rem; font-size: 1rem; font-weight: 500;
}
.hero__remoto .icone { width: 1.2rem; height: 1.2rem; color: var(--vermelho-vivo); }
.hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin-top: 0.6rem; font-size: 0.9375rem; }
.ponto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--vermelho-vivo); }
.hero__hora { color: var(--cinza-claro); display: inline-flex; align-items: center; gap: 0.35rem; }
.hero__hora[hidden] { display: none; }
.hero__hora .icone { width: 1rem; height: 1rem; }
@media (max-width: 30em) { .hero__hora::before { display: none; } }
.hero__hora::before { content: ''; display: inline-block; width: 1px; height: 0.9em; background: currentColor; margin-right: 0.25rem; opacity: 0.6; }
.hero__relogio { font-weight: 700; color: var(--branco); }

/* Prévias: três colunas de páginas reais subindo devagar. É o único movimento do site. */
.reel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  height: 24rem; overflow: hidden;
  margin-inline: calc(var(--margem) * -0.25);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.reel__track { display: flex; flex-direction: column; gap: 0.75rem; animation: subir 70s linear infinite; }
.reel__col--2 .reel__track { animation-duration: 95s; animation-delay: -30s; }
.reel__col--3 .reel__track { animation-duration: 82s; animation-delay: -12s; }
.reel__track img { width: 100%; border-radius: 6px; background: var(--grafite); outline: 1px solid #2C2C2E; outline-offset: -1px; }
@keyframes subir { to { transform: translateY(calc(-50% - 0.375rem)); } }
.reel--parado .reel__track { animation-play-state: paused; }
.reel__pausa {
  position: absolute; right: var(--borda); bottom: 1.25rem;
  background: var(--preto); border: 0; border-radius: 6px; padding: 0.4rem 0.75rem;
  color: var(--cinza-claro); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.2em;
}
.reel__pausa:hover { color: var(--branco); }
@media (prefers-reduced-motion: reduce) {
  .reel__track { animation: none; }
  .reel__pausa { display: none; }
}

@media (min-width: 64em) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    min-height: min(calc(100svh - 4.5rem), 58rem);
    padding-bottom: 3rem;
  }
  .hero__nome { font-size: min(11.5vw, 13rem); }
  .reel {
    position: absolute; top: 0; right: var(--borda); bottom: 0;
    width: calc(50% - var(--borda) - 1rem); height: auto; margin: 0; gap: 1rem;
  }
  .reel__track { gap: 1rem; }
  @keyframes subir { to { transform: translateY(calc(-50% - 0.5rem)); } }
}

/* ---------- seções claras ---------- */
.secao { padding: clamp(4rem, 9vw, 7.5rem) var(--borda) 0; }
.secao__titulo {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 7.5rem); line-height: 0.85; color: var(--preto);
  letter-spacing: -0.005em;
}
.secao__cabeca { display: grid; gap: 1.25rem; }
.secao__texto { max-width: 52ch; color: var(--cinza); }
@media (min-width: 64em) {
  .secao__cabeca { grid-template-columns: auto 1fr; align-items: end; gap: 3rem; }
}

/* ---------- cases ---------- */
.case { display: grid; gap: 2rem; margin-top: clamp(3rem, 7vw, 6rem); }
.case__nome {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.5rem, 6.5vw, 4.75rem); line-height: 0.9;
}
.case__tipo { margin-top: 0.5rem; font-size: 1.125rem; font-weight: 500; color: var(--vermelho-texto); }
.case__resumo { margin-top: 1.25rem; max-width: 46ch; }
.case__rotulo { margin-top: 1.75rem; font-size: 1rem; font-weight: 700; }
.case__fiz { margin-top: 0.5rem; max-width: 50ch; }
.case__fiz li { position: relative; padding-left: 1.25rem; margin-top: 0.35rem; }
.case__fiz li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 0.55rem; height: 2px; background: var(--vermelho);
}
.case__meta { display: grid; gap: 0.75rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 2px solid var(--preto); }
.case__meta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.case__meta dt { font-size: 0.9375rem; color: var(--cinza); }
.case__link { margin-top: 1.5rem; }
.case__link a { font-weight: 700; color: var(--vermelho-texto); text-decoration-thickness: 2px; }

.selo { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; }
.selo--no-ar, .selo--live { background: var(--preto); color: var(--branco); }
.selo--em-implantacao, .selo--rolling-out { background: var(--vermelho); color: #fff; }
.selo--uso-interno, .selo--internal-use { background: var(--superficie); color: var(--preto); }

.frame__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0 0 0.6rem;
  font-size: 0.875rem; color: var(--cinza);
}
.frame__url { font-weight: 700; color: var(--preto); }
/* No celular a moldura mostra o começo da página, sem rolagem dentro da rolagem
   (o link "Abrir o site" leva ao resto); a partir de 64em ela rola por conta própria. */
.frame__dica { display: none; }
.frame {
  overflow: hidden; max-height: 34rem;
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
          mask-image: linear-gradient(#000 82%, transparent);
  border: 2px solid var(--preto); border-radius: var(--raio);
  background: #fff;
  scrollbar-width: thin; scrollbar-color: var(--vermelho) var(--superficie);
}
.frame img { width: 100%; }

.case__visual--fluxo {
  background: var(--preto); color: var(--branco);
  border-radius: var(--raio); padding: clamp(1.5rem, 4vw, 3rem);
  display: flex; align-items: center;
}
.fluxo { counter-reset: passo; display: grid; gap: 0; width: 100%; }
.fluxo li {
  counter-increment: passo;
  position: relative; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem;
  padding: 1rem 0 1.5rem;
}
.fluxo li::before {
  content: counter(passo); grid-row: span 2;
  font-family: var(--display); font-weight: 900; font-size: 2.75rem; line-height: 1; color: var(--vermelho-vivo);
}
.fluxo li:not(:last-child)::after {
  content: ''; position: absolute; left: 0.9rem; top: 4rem; bottom: -0.25rem; width: 2px; background: #3A3A3C;
}
.fluxo strong { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; }
.fluxo span { color: var(--cinza-claro); }

@media (min-width: 64em) {
  .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: start; }
  .case__texto { position: sticky; top: 2rem; }
  .frame { height: min(80vh, 46rem); max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: none; mask-image: none; }
  .frame__dica { display: inline; }
  .case__visual--fluxo { min-height: 30rem; }
}

/* ---------- outros trabalhos ---------- */
.obras { display: grid; gap: 2rem 1.25rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
.obra img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: var(--raio); border: 1px solid var(--linha); background: var(--superficie);
}
.obra--marca img { object-fit: contain; object-position: center; background: #000; border-color: #000; padding: 8%; }
.obra__nome { margin-top: 0.75rem; font-weight: 700; }
.obra__tipo { font-size: 0.9375rem; color: var(--cinza); }
@media (min-width: 40em) { .obras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .obras { grid-template-columns: repeat(4, 1fr); } }

/* ---------- serviços ---------- */
.servicos__lista { margin-top: 2.5rem; border-bottom: 2px solid var(--preto); }
.servico { display: grid; gap: 0.5rem; padding: 1.75rem 0; border-top: 2px solid var(--preto); }
.servico__nome { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; }
.servico__texto { max-width: 46ch; }
.servico__preco { font-weight: 700; font-size: 1.125rem; color: var(--vermelho-texto); }
.servico__prazo { font-size: 0.9375rem; color: var(--cinza); }
.servicos__nota { margin-top: 1.5rem; max-width: 60ch; color: var(--cinza); }
@media (min-width: 64em) {
  .servico { grid-template-columns: 4fr 6fr 3fr; column-gap: 3rem; align-items: baseline; }
  .servico__preco { grid-column: 3; grid-row: 1; }
  .servico__prazo { grid-column: 3; grid-row: 2; margin-top: -0.25rem; }
  .servico__texto { grid-row: span 2; }
  .servico__nome { grid-row: span 2; }
}

/* ---------- processo ---------- */
.passos { counter-reset: passo; display: grid; gap: 2rem; margin-top: 2.5rem; }
.passo { counter-increment: passo; }
.passo::before {
  content: counter(passo); display: block;
  font-family: var(--display); font-weight: 900; font-size: 4rem; line-height: 0.9; color: var(--vermelho-texto);
}
.passo__nome { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 700; }
.passo p { margin-top: 0.35rem; color: var(--cinza); max-width: 32ch; }
@media (min-width: 40em) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) {
  .passos { grid-template-columns: repeat(5, 1fr); gap: 2rem; }
  .passo { border-left: 2px solid var(--linha); padding-left: 1.25rem; }
}

/* ---------- sobre ---------- */
.sobre { display: grid; gap: 2.5rem; padding-bottom: clamp(4rem, 9vw, 7.5rem); }
.sobre__foto img { width: 100%; max-width: 26rem; border-radius: var(--raio); background: var(--superficie); }
.sobre__texto p { margin-top: 1.25rem; max-width: 58ch; }
.sobre__texto .secao__titulo { margin-bottom: 0.5rem; }
.fatos { margin-top: 2rem; border-top: 2px solid var(--preto); }
.fatos div { display: grid; gap: 0.15rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--linha); }
.fatos dt { color: var(--cinza); font-size: 0.9375rem; display: flex; align-items: center; gap: 0.5rem; }
.fatos dt .icone { width: 1.1rem; height: 1.1rem; color: var(--vermelho-texto); }
@media (min-width: 40em) { .fatos div { grid-template-columns: 11rem 1fr; } }
@media (min-width: 64em) {
  .sobre { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4.5rem; align-items: start; }
  .sobre__foto { position: sticky; top: 2rem; }
}

/* ---------- contato ---------- */
.contato {
  background: var(--vermelho); color: #fff;
  padding: clamp(4rem, 9vw, 7rem) var(--borda);
}
.contato__titulo {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 7rem); line-height: 0.85; max-width: 14ch;
}
.contato__texto { max-width: 44ch; margin-top: 1.5rem; font-size: 1.1875rem; }
.contato__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; }
.contato__fone { font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; text-decoration: none; min-height: 2.75rem; }
.contato__fone:hover { text-decoration: underline; }
.contato__email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-top: 2rem; }
.contato__email a {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.125rem, 4.6vw, 3rem); line-height: 1.1;
  text-decoration-color: #fff; text-decoration-thickness: 3px; text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.contato__email-link { display: inline-flex; align-items: center; gap: 0.6rem; }
.contato__email-link .icone { width: 0.8em; height: 0.8em; }
.copiar {
  background: none; border: 1px solid rgba(255,255,255,.7); border-radius: 6px;
  padding: 0.4rem 0.8rem; font-size: 0.9375rem; color: #fff;
}
.copiar .icone { width: 1rem; height: 1rem; }
.copiar:hover { border-color: #fff; background: rgba(0,0,0,.12); }
.copiar__aviso { font-size: 0.9375rem; font-weight: 700; color: #fff; }
.contato__redes-titulo { margin-top: 2.5rem; font-size: 1rem; font-weight: 700; }
.redes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
/* No campo vermelho o botão principal vira preto, para não sumir no fundo. */
.contato .btn--primaria { background: var(--preto); color: #fff; }
.contato .btn--primaria:hover { background: #2A2A2C; }

/* ---------- rodapé ---------- */
.rodape {
  background: var(--preto); color: var(--cinza-claro);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding: 1.5rem var(--borda); font-size: 0.9375rem;
}
.rodape a { color: var(--branco); }
.rodape__redes { display: flex; gap: 0.25rem; margin: -0.5rem 0; }
.rodape__redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 6px; color: var(--cinza-claro);
}
.rodape__redes a:hover { color: var(--branco); background: var(--grafite); }
.rodape { align-items: center; }

@media print {
  .reel, .reel__pausa, .topo__nav, .copiar { display: none; }
  .hero, .contato, .topo { background: none; color: #000; }
  .frame { height: auto; overflow: visible; }
}