/* Hallmark · macrostructure: Marquee Hero noir (logo-como-herói) · produção trivod.com
 * theme: custom · vibe: "noir de moda, brilho de vitrine, contido" · paper: oklch(13% 0.010 170) · accent: oklch(72% 0.12 158)
 * display: Clash Display · body: General Sans · axes: dark / display-condensed / chromatic-green
 * aprovado pelo cliente em 2026-08-08 (proposta v6-noir-vitrine)
 */
:root{
  /* fallback hex (Safari sem oklch); o bloco @supports abaixo refina */
  --color-paper:  #141917;
  --color-paper-2:#1a201e;
  --color-ink:    #e6eeea;
  --color-ink-2:  #b6c3be;
  --color-muted:  #879690;
  --color-rule:   #343e3a;
  --color-accent: #4abc8b;
  --color-focus:  #43d99b;

  --font-display: "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "General Sans", ui-sans-serif, system-ui, sans-serif;

  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.1875rem;
  --text-lg: 1.5rem;
  --text-xl: 1.875rem;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-long: 480ms;

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
}
@supports (color: oklch(50% 0 0)){
  :root{
    --color-paper:  oklch(13% 0.010 170);
    --color-paper-2:oklch(16% 0.012 170);
    --color-ink:    oklch(93% 0.008 160);
    --color-ink-2:  oklch(78% 0.008 162);
    --color-muted:  oklch(62% 0.008 165);
    --color-rule:   oklch(27% 0.010 170);
    --color-accent: oklch(72% 0.12 158);
    --color-focus:  oklch(76% 0.17 158);
  }
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:hidden;overflow-x:clip;
  margin:0;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--text-base);
  line-height:1.65;
  padding-bottom:max(0px, env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--color-accent);color:var(--color-paper)}
a{color:var(--color-ink);text-decoration:none}
a:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
h1,h2{font-family:var(--font-display);font-style:normal;font-weight:500;margin:0;overflow-wrap:anywhere;min-width:0;text-wrap:balance}

/* fundo · a vitrine como detalhe de página inteira */
.veil{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url('/assets/vitrine-bg.jpg');
  background-size:cover;background-position:center;
  opacity:0.17;
  filter:saturate(0.55) brightness(0.9) blur(1px);
}
.veil::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 42% at 50% 12%, rgba(20,25,23,0.92) 0%, rgba(20,25,23,0.55) 55%, rgba(20,25,23,0) 100%),
    radial-gradient(95% 80% at 50% 55%, rgba(20,25,23,0) 35%, rgba(20,25,23,1) 96%);
}

/* ---- herói · a logo é o herói ---- */
.hero{
  position:relative;z-index:1;
  padding:calc(var(--space-3xl) + var(--space-xl)) var(--page-gutter) var(--space-3xl);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);
  text-align:center;
}
.hero .mark{width:clamp(96px, 11vw, 148px);height:auto}
.hero .wordmark{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem, 1.8vw + 0.6rem, 2rem);
  letter-spacing:0.5em;text-indent:0.5em;
  color:var(--color-ink);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero .lede{margin:var(--space-lg) 0 0;font-size:var(--text-md);color:var(--color-ink-2);max-width:50ch}

.reveal{opacity:0;transform:translateY(12px);animation:reveal var(--dur-long) var(--ease-out) forwards;animation-delay:calc(var(--i,0)*90ms)}
@keyframes reveal{to{opacity:1;transform:none}}

/* ---- serviços · três definições centradas ---- */
.services{
  position:relative;z-index:1;
  margin:0 auto;padding:0 var(--page-gutter);
  max-width:44rem;
  display:grid;gap:var(--space-xl);
  text-align:center;
}
.services div h2{font-size:var(--text-lg);letter-spacing:0.01em}
.services div p{margin:var(--space-xs) 0 0;color:var(--color-muted);font-size:var(--text-sm);letter-spacing:0.04em}

/* ---- marcas · marquee de logos ---- */
.brands{position:relative;z-index:1;margin-top:var(--space-3xl);border-block:1px solid var(--color-rule);padding:var(--space-xl) 0;overflow:hidden}
.brands .track{display:flex;width:max-content;animation:marquee 52s linear infinite}
.brands:hover .track{animation-play-state:paused}
.brands ul{list-style:none;display:flex;align-items:center;margin:0;padding:0}
.brands li{padding:0 var(--space-2xl)}
.brands img{
  height:26px;width:auto;display:block;
  filter:brightness(0) invert(1);opacity:0.5;
  transition:opacity var(--dur-micro) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .brands li:hover img{opacity:0.95}
}
@keyframes marquee{to{transform:translateX(-50%)}}
.brands-note{
  position:relative;z-index:1;
  margin:var(--space-md) auto 0;max-width:60ch;padding:0 var(--page-gutter);
  text-align:center;color:var(--color-muted);font-size:var(--text-sm);
}

/* ---- contato ---- */
.contact{position:relative;z-index:1;flex:1;padding:var(--space-3xl) var(--page-gutter);text-align:center}
.contact h2{font-size:var(--text-xl)}
.contact .links{
  margin:var(--space-xl) 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:var(--space-md) var(--space-2xl);
}
.contact .links a{
  white-space:nowrap;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem, 1.6vw + 0.7rem, 2rem);
  border-bottom:1px solid var(--color-rule);
  padding-bottom:0.12em;
  transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out);
}
.contact .links a:hover{color:var(--color-accent);border-color:var(--color-accent)}

/* ---- rodapé ---- */
footer{
  position:relative;z-index:1;
  background:var(--color-paper-2);
  border-top:1px solid var(--color-rule);
  padding:var(--space-xl) var(--page-gutter) var(--space-2xl);
  text-align:center;color:var(--color-muted);font-size:var(--text-sm);
}
footer .line{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs) var(--space-lg)}
footer a{white-space:nowrap;color:var(--color-muted);border-bottom:1px solid var(--color-rule);transition:color var(--dur-micro) var(--ease-out)}
footer a:hover{color:var(--color-ink)}
footer .langs{display:inline-flex;gap:var(--space-md);letter-spacing:0.12em}
footer .langs a[aria-current="page"]{color:var(--color-accent);border-color:var(--color-accent)}
footer .registry{margin:var(--space-lg) auto 0;font-size:0.72rem;line-height:1.7;opacity:0.55;max-width:76ch}

/* ---- documento (política de privacidade) ---- */
.docbar{
  position:relative;z-index:1;
  border-bottom:1px solid var(--color-rule);
  padding:var(--space-lg) var(--page-gutter);
  text-align:center;
}
.docbar a{
  display:inline-flex;align-items:center;gap:0.7rem;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-md);
  letter-spacing:0.3em;text-indent:0.3em;
}
.docbar img{width:30px;height:auto}
.doc{
  position:relative;z-index:1;
  flex:1;width:100%;max-width:46rem;margin:0 auto;
  padding:var(--space-2xl) var(--page-gutter) var(--space-3xl);
}
.doc h1{font-size:clamp(1.8rem, 3vw + 0.6rem, 2.6rem);line-height:1.15}
.doc .updated{margin:var(--space-sm) 0 var(--space-2xl);color:var(--color-muted);font-size:var(--text-sm)}
.doc h2{font-size:var(--text-md);margin:var(--space-xl) 0 var(--space-sm)}
.doc h2::before{content:"";display:inline-block;width:7px;height:7px;background:var(--color-accent);margin-right:0.6em;vertical-align:middle}
.doc p{color:var(--color-ink-2);margin:0 0 var(--space-sm);max-width:70ch}
.doc a{color:var(--color-accent);border-bottom:1px solid var(--color-rule)}
.doc a:hover{border-color:var(--color-accent)}

@media (max-width:40rem){
  .brands li{padding:0 var(--space-xl)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:150ms!important;transition-duration:0ms!important}
  .reveal{animation:reveal-fade 150ms linear forwards}
  @keyframes reveal-fade{to{opacity:1;transform:none}}
  .brands .track{animation:none;width:auto}
  .brands ul[aria-hidden="true"]{display:none}
  .brands ul{flex-wrap:wrap;justify-content:center;row-gap:var(--space-md)}
}