/* Azon Lab — BIO PRIME
   Conceito: a interface é aço e grafite; toda cor da página vem do trabalho.
   O Z do logo tem um corte na diagonal. Aqui, todo quadro com esse corte toca um vídeo.
   Raleway Bold nos títulos (principal); Raleway Regular no texto (complementar). Texto centralizado. */

:root {
  /* cor */
  --breu: #000000;          /* fundo */
  --grafite: #151517;       /* superfícies, placeholders */
  --grafite-alto: #222226;  /* superfície pressionada */
  --giz: #ECEDEF;           /* texto: branco frio de aço (18.6:1) */
  --chumbo: #A3A7AD;        /* apoio (8.3:1); mais claro porque a Raleway Regular é fina */
  --aco: linear-gradient(100deg, #F4F5F7 0%, #B9BDC3 38%, #E3E5E8 58%, #9A9FA6 100%);
  --aco-apertado: linear-gradient(100deg, #D9DBDF 0%, #9DA2A9 38%, #C6C9CE 58%, #858A91 100%);
  --linha: rgb(236 237 239 / 0.13);

  /* tipo */
  --f-titulo: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* 700 */
  --f-texto: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;    /* 400 */

  /* motion */
  --m-instant: 80ms;
  --m-fast: 140ms;
  --m-standard: 220ms;
  --m-emphasis: 320ms;
  --m-scene: 460ms;
  --m-brilho: 1100ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-brilho: cubic-bezier(0.45, 0, 0.2, 1);   /* a luz atravessa o metal sem pressa e sai limpa */
  --shift: 12px;
  --press-scale: 0.97;

  /* o corte do Z: ~57° */
  --corte-x: 20px;
  --corte-y: 31px;

  --gutter: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift: 0px;
    --press-scale: 1;
    --m-scene: 200ms;
  }
}

/* ---------- base ---------- */

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

html {
  background: var(--breu);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--breu);
  color: var(--giz);
  font: 400 17px/1.55 var(--f-texto);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg { display: block; max-width: 100%; }

h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
}

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--giz);
  outline-offset: 3px;
  border-radius: 2px;
}

.pular {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: 8px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--giz);
  color: var(--breu);
  font-weight: 700;
  translate: 0 -200%;
}
.pular:focus-visible { translate: none; }

.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pagina {
  max-width: 560px;
  margin: 0 auto;
  overflow-x: clip;
}

/* títulos: Michroma, larga como o AZON */
h2 {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(1.85rem, 8.6vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.cabeca {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 0 var(--gutter);
  margin-bottom: 28px;
}
.cabeca p {
  max-width: 36ch;
  color: var(--chumbo);
}

/* ---------- reveal (só com JS; sem JS tudo aparece) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--shift));
  transition:
    opacity var(--m-scene) var(--ease-enter),
    transform var(--m-scene) var(--ease-enter);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- CENA 1 · abertura ---------- */

.abertura {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 92vh;
  min-height: 92svh;
  padding: calc(28px + var(--safe-top)) var(--gutter) 34px;
  isolation: isolate;
}

.abertura-midia {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--grafite);
}

.abertura-poster,
.abertura-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.abertura-video {
  opacity: 0;
  transition: opacity var(--m-scene) var(--ease-standard);
}
.abertura-video.is-playing { opacity: 1; }

/* scrim só onde há texto: o logo em cima e o manifesto embaixo */
.abertura-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0) 18%),
    linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.92) 40%, rgb(0 0 0 / 0) 74%);
}

.abertura-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* logo 2D, redesenhado em vetor a partir do manual da marca */
.marca {
  width: min(78%, 300px);
  color: var(--giz);
}
.marca-logo {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* assinatura: o brilho do aço atravessa o logo uma vez, na diagonal do Z */
.marca-brilho { opacity: 0; }
@keyframes brilho-passa {
  0%   { transform: translateX(0); opacity: 0.9; }
  100% { transform: translateX(1040px); opacity: 0.9; }
}
@media (prefers-reduced-motion: no-preference) {
  .marca-brilho { animation: brilho-passa var(--m-brilho) var(--ease-brilho) 450ms both; }
}

.manifesto {
  margin-top: 30px;
  font-family: var(--f-titulo);
  font-size: clamp(2rem, 9.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 12ch;
}

.abertura-texto {
  margin-top: 14px;
  text-wrap: balance;
  max-width: 34ch;
  color: rgb(236 237 239 / 0.84);
}

.ancora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: opacity var(--m-fast) var(--ease-standard);
}
.ancora i { font-size: 14px; }
.ancora:active { opacity: 0.6; }

.video-pausa {
  position: absolute;
  top: calc(14px + var(--safe-top));
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid rgb(236 237 239 / 0.35);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.4);
  cursor: pointer;
  transition: transform var(--m-fast) var(--ease-standard), background-color var(--m-fast) var(--ease-standard);
}
.video-pausa[hidden] { display: none; }
.video-pausa:active { transform: scale(0.92); background: var(--grafite-alto); }

/* ---------- quadro de vídeo: o corte do Z marca o que toca ---------- */

.video-quadro {
  position: relative;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.video-img {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--grafite);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%, 0 100%);
}
.video-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--m-standard) var(--ease-standard), opacity var(--m-fast) var(--ease-standard);
}
.video-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0) 42%);
}

.video-rotulo {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  white-space: nowrap;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
.video-rotulo i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--aco);
  color: var(--breu);
  font-size: 13px;
  padding-left: 2px;
}
.video-tempo {
  font-size: 13px;
  font-weight: 400;
  color: rgb(236 237 239 / 0.8);
  font-variant-numeric: tabular-nums;
}

.video-quadro:active .video-img img { transform: scale(var(--press-scale)); opacity: 0.82; }

.video-quadro--filme { margin: 0 var(--gutter); }
.video-quadro--filme .video-img { aspect-ratio: 7 / 5; }
.video-quadro--reel .video-img { aspect-ratio: 9 / 16; }

/* ---------- CENA 2 · case ---------- */

.case { padding: 72px 0 80px; }

.cabeca .cliente {
  font-weight: 700;
  font-size: 15px;
  color: var(--giz);
}

.video-quadro--destaque {
  width: min(62%, 260px);
  margin: 24px auto 0;
}

/* da captação ao corte final: seis frentes, ícone sobre o nome, em 3 colunas */
.atuacao {
  margin: 40px var(--gutter) 0;
}
.atuacao h3 {
  font-family: var(--f-titulo);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
}
.atuacao ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 10px;
}
.atuacao li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--chumbo);
}
.atuacao i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  font-size: 18px;
  color: var(--giz);
}

.momentos { margin-top: 44px; }
.momentos figcaption {
  margin: 12px var(--gutter) 0;
  font-size: 14px;
  color: var(--chumbo);
}

.trilho {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter);
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > li { scroll-snap-align: start; flex: none; }

.trilho--momentos > li { width: min(76%, 320px); }
.trilho--momentos img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--grafite);
}

.frase {
  margin: 56px var(--gutter) 0;
}
.frase p {
  font-family: var(--f-titulo);
  font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ressalva {
  margin: 36px auto 0;
  padding: 0 var(--gutter);
  max-width: calc(38ch + 2 * var(--gutter));
  font-size: 15px;
  color: var(--chumbo);
}

.case > .link-aco {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}
.link-aco {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 6px var(--gutter) 0;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: opacity var(--m-fast) var(--ease-standard);
}
.link-aco i { font-size: 18px; }
.link-aco:active { opacity: 0.6; }

/* ---------- CENA 3 · trabalhos ---------- */

.trabalhos {
  padding: 72px 0 80px;
  border-top: 1px solid var(--linha);
}

.trilho--reels > li { width: min(46%, 220px); }

.reel-nome {
  margin-top: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.reel-info {
  font-size: 14px;
  color: var(--chumbo);
}

/* ---------- CENA 4 · processo ---------- */

.processo {
  padding: 72px 0 72px;
  background: var(--grafite);
}

.passos {
  counter-reset: passo;
  margin: 0 var(--gutter);
}
.passos li {
  counter-increment: passo;
  display: grid;
  justify-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--linha);
}
.passos li::before {
  content: counter(passo);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 6px;
}
.passos h3 {
  font-family: var(--f-titulo);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.passos p {
  margin-top: 6px;
  max-width: 34ch;
  color: var(--chumbo);
}

/* ---------- CENA 5 · depoimentos ---------- */

.depoimentos { padding: 72px 0 32px; }

.depo blockquote {
  margin: 20px var(--gutter) 0;
}
.depo blockquote p {
  font-family: var(--f-titulo);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.depo figcaption {
  margin: 10px var(--gutter) 0;
  font-size: 14px;
  color: var(--chumbo);
}

.depo--vertical {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--linha);
}
.depo--vertical .video-quadro {
  width: min(62%, 260px);
  margin: 0 auto;
}

.depo--prints {
  display: grid;
  gap: 10px;
  margin: 44px var(--gutter) 0;
  padding-top: 28px;
  border-top: 1px solid var(--linha);
}
.depo--prints img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #181C1F;   /* o cinza do próprio print, enquanto carrega */
}
.depo--prints figcaption { margin: 4px 0 0; }

/* ---------- CENA 6 · fim ---------- */

.fim {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 72px var(--gutter) 64px;
  overflow: hidden;
  isolation: isolate;
}

.fim-z {
  position: absolute;
  z-index: -1;
  top: 22px;
  left: 50%;
  translate: -50% 0;
  width: 190px;
  height: auto;
  color: var(--giz);
  opacity: 0.08;
}

.fim p {
  max-width: 32ch;
  color: rgb(236 237 239 / 0.82);
}

/* ação: uma placa de aço escovado */
.btn-aco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--aco);
  color: var(--breu);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 0 rgb(0 0 0 / 0.25);
  transition: transform var(--m-fast) var(--ease-standard);
}
.btn-aco i { font-size: 21px; }
.btn-aco:active {
  transform: scale(var(--press-scale));
  background: var(--aco-apertado);
}

.fim .btn-aco {
  width: 100%;
  margin-top: 12px;
}

.redes {
  display: grid;
  justify-self: stretch;
  margin-top: 8px;
}
.redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  transition: opacity var(--m-fast) var(--ease-standard);
}
.redes a:active { opacity: 0.6; }
.redes i {
  width: 22px;
  font-size: 20px;
  text-align: center;
}

/* ---------- CTA flutuante (Regra do CTA) ---------- */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 20;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 12px 32px rgb(0 0 0 / 0.7);
  translate: -50% var(--shift);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--m-standard) var(--ease-exit),
    translate var(--m-standard) var(--ease-exit),
    transform var(--m-fast) var(--ease-standard),
    visibility 0s linear var(--m-standard);
}
.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--m-emphasis) var(--ease-enter),
    translate var(--m-emphasis) var(--ease-enter),
    transform var(--m-fast) var(--ease-standard),
    visibility 0s;
}

/* ---------- player ---------- */

.player {
  width: 100%;
  max-width: 560px;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: var(--breu);
  color: var(--giz);
}
.player::backdrop { background: rgb(0 0 0 / 0.92); }
.player[open] { animation: player-entra var(--m-emphasis) var(--ease-enter); }
html:has(.player[open]) { overflow: hidden; }

@keyframes player-entra {
  from { opacity: 0; transform: scale(0.98); }
}

.player-corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: calc(14px + var(--safe-top)) var(--gutter) calc(16px + var(--safe-bottom));
}

.player-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.player-topo > div { text-align: left; }
.player-titulo {
  font-family: var(--f-titulo);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
.player-info {
  font-size: 14px;
  color: var(--chumbo);
}

.player-fechar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--grafite);
  font-size: 20px;
  cursor: pointer;
  transition: transform var(--m-fast) var(--ease-standard), background-color var(--m-fast) var(--ease-standard);
}
.player-fechar:active { transform: scale(0.92); background: var(--grafite-alto); }

.player-tela {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  background: var(--grafite);
}
.player-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--breu);
}

.player-cta { width: 100%; }

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

.rodape {
  padding: 32px var(--gutter) calc(32px + var(--safe-bottom));
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: 13px;
  color: var(--chumbo);
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--giz);
  text-decoration: none;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: #D90000;   /* a página não tem acento de cor: vale o vermelho original da marca */
  --seal-ring: 0;           /* linha fina, como os fios do LAB */
  --seal-font: var(--f-texto);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .abertura-video { display: none; }
  .cta-flutuante,
  .cta-flutuante.is-visivel { translate: -50% 0; }
  .player[open] { animation-name: player-fade; }
  .credito:active .selo-b2 { rotate: none; }
  .video-quadro:active .video-img img { transform: none; }
  .marca-brilho { display: none; }
}
@keyframes player-fade { from { opacity: 0; } }

/* ---------- telas pequenas ---------- */

@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .atuacao ul { gap: 18px 6px; }
  .atuacao li { font-size: 13px; }
  .btn-aco { padding: 0 20px; font-size: 16px; }
}

/* ---------- desktop: a coluna vira um frame ---------- */

@media (min-width: 600px) {
  body { padding-bottom: 40px; }
  .pagina {
    border-left: 1px solid var(--linha);
    border-right: 1px solid var(--linha);
  }
}

@media (hover: hover) and (pointer: fine) {
  .video-quadro:hover .video-img img { transform: scale(1.03); }
  .ancora:hover,
  .link-aco:hover { text-decoration-thickness: 3px; }
  .redes a:hover { opacity: 0.75; }
}