/* =========================================================
   LL Websites — folha de estilo única
   Arquitetura: trilho fixo à esquerda + faixas de borda a borda.
   Paleta neutra; chanfros que ecoam o monograma LL.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:        #111214;
  --ink-2:      #17181B;
  --graphite:   #272A2E;
  --steel:      #D1D5DB;
  --white:      #FFFFFF;
  --paper:      #ECEDEF;
  --paper-2:    #E1E3E6;
  --muted:      #9BA1A8;
  --muted-dark: #4E545B;

  --line:      rgba(255,255,255,.11);
  --line-2:    rgba(255,255,255,.22);
  --line-dark: rgba(17,18,20,.14);

  --rail: 0px;
  --bar: 68px;
  --wrap: 1560px;
  --gut: clamp(20px, 4.5vw, 60px);
  --cut: 16px;

  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; padding-left:var(--rail);
  background:var(--ink); color:var(--white);
  font-family:var(--f-text);
  font-size:clamp(15px,1vw + 12px,17px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--f-display); font-weight:700; font-stretch:110%; margin:0; letter-spacing:-.03em; line-height:.98; text-wrap:balance; }
p{ margin:0; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--white); outline-offset:3px; border-radius:2px; }
.services :focus-visible{ outline-color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--white); color:var(--ink); padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

#topo{ display:block; height:0; }
#topo:focus{ outline:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- 3. Tipografia utilitária ---------- */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
}
.services .eyebrow{ color:var(--muted-dark); }
.idx{ color:var(--white); font-weight:500; }
.services .idx{ color:var(--ink); }
.eyebrow .dot{ width:7px; height:7px; background:var(--steel); border-radius:50%; flex:none; }

h1{ font-size:clamp(2.55rem, 6.6vw, 6.2rem); max-width:16ch; }
h2{ font-size:clamp(1.95rem, 4.2vw, 3.5rem); }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing:-.02em; }

.lede{ color:var(--steel); font-size:clamp(1.02rem,1.35vw,1.25rem); max-width:36ch; }
.services .lede{ color:var(--muted-dark); }

.head{ margin-bottom:clamp(34px,4.5vw,60px); }
.head h2 + .lede{ margin-top:16px; }
.head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }

/* ---------- 4. Botões ---------- */
.btn{
  --pad: 15px 26px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pad); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn--sm{ --pad: 11px 18px; font-size:.86rem; }
.btn--lg{ --pad: 17px 30px; font-size:1rem; }
.btn--xl{ --pad: 22px 44px; font-size:1.08rem; }
.btn--solid,.btn--dark{ clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.btn--solid{ background:var(--white); color:var(--ink); }
.btn--solid:hover{ background:var(--steel); transform:translateY(-2px); }
.btn--line{ border-color:var(--line-2); color:var(--white); }
.btn--line:hover{ border-color:var(--white); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--white); }
.btn--dark:hover{ background:var(--graphite); transform:translateY(-2px); }

.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.arrow{ display:inline-block; transition:transform .3s var(--ease); }

/* ---------- 5. Trilho fixo (ativado no computador) ---------- */
.rail{ display:none; }

/* ---------- 6. Barra superior ---------- */
.bar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:var(--bar); padding-inline:var(--gut);
  background:rgba(17,18,20,.74);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.bar.is-stuck{ border-bottom-color:var(--line); background:rgba(17,18,20,.93); }

.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand picture{ display:block; line-height:0; }
.brand__mark{ width:auto; height:36px; filter:contrast(1.07) brightness(1.05); }
.brand__name{ font-family:var(--f-display); font-weight:700; font-stretch:110%; font-size:1rem; letter-spacing:-.02em; white-space:nowrap; }
.brand__name em{ font-style:normal; font-weight:500; color:var(--steel); }
.brand--sm .brand__mark{ height:46px; }

.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,32px); }
.nav a:not(.btn){ font-size:.92rem; color:var(--steel); position:relative; padding-block:6px; transition:color .2s var(--ease); }
.nav a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--white); transition:right .3s var(--ease); }
.nav a:not(.btn):hover{ color:var(--white); }
.nav a:not(.btn):hover::after{ right:0; }

.burger{ display:none; align-items:center; gap:10px; background:none; border:0; padding:10px 2px; cursor:pointer; }
.burger__lines{ display:block; width:24px; }
.burger__lines i{ display:block; height:1.5px; background:var(--white); margin:5px 0; transition:transform .3s var(--ease); }
.burger__label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.burger[aria-expanded="true"] .burger__lines i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ---------- 7. Abertura ---------- */
.hero{ position:relative; padding-top:clamp(44px,7vw,96px); overflow:hidden; }
.hero::after{
  content:""; position:absolute; top:-38%; left:12%; width:min(1000px,120%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(209,213,219,.14), transparent 62%);
  pointer-events:none;
}
.hero > *{ position:relative; z-index:1; }

.hero__base{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,64px); align-items:end;
  margin-top:clamp(30px,4vw,52px); padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line);
}
.hero__facts{ display:grid; gap:10px; }
.hero__facts li{ position:relative; padding-left:22px; color:var(--steel); font-size:.98rem; }
.hero__facts li::before{ content:""; position:absolute; left:0; top:.62em; width:11px; height:1px; background:var(--steel); }

/* faixa horizontal de projetos — sangra até a borda */
.strip{
  margin-top:clamp(38px,5vw,72px); padding:0 var(--gut) 14px;
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.strip__track{ display:flex; gap:clamp(12px,1.4vw,20px); }
.strip__track > li{ flex:0 0 clamp(238px,30vw,430px); scroll-snap-align:start; }
.strip::-webkit-scrollbar{ height:6px; }
.strip::-webkit-scrollbar-thumb{ background:var(--line-2); }

/* ---------- 8. Moldura de projeto ---------- */
.frame{
  display:block; margin:0; color:inherit; background:var(--ink-2);
  border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease);
}
a.frame:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.frame__bar{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.03);
}
.frame__bar i{ width:6px; height:6px; border-radius:50%; background:var(--line-2); flex:none; }
.frame__url{
  font-family:var(--f-mono); font-size:.63rem; color:var(--muted); margin-left:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frame__view{
  display:block; aspect-ratio:12/5; position:relative;
  background:
    radial-gradient(95% 75% at 14% 6%, color-mix(in srgb, var(--brand2) 48%, transparent), transparent 58%),
    linear-gradient(155deg, var(--brand), color-mix(in srgb, var(--brand) 74%, #000));
}
.frame__view img{ width:100%; height:100%; object-fit:cover; object-position:left top; position:relative; z-index:1; }
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .frame__view{ background:linear-gradient(155deg, var(--brand2), var(--brand)); }
}

/* cores reais de cada projeto, visíveis enquanto a imagem carrega */
.p-espaco       { --brand:#3A1836; --brand2:#6C3562; }
.p-tezla        { --brand:#17181A; --brand2:#D9585B; }
.p-barril       { --brand:#1E4A2C; --brand2:#3E8A55; }
.p-saofrancisco { --brand:#0D141C; --brand2:#1F8A4C; }

/* ---------- 9. Trabalhos ---------- */
.works{ padding-block:clamp(72px,8vw,124px); }
.works__grid{ display:grid; gap:clamp(22px,3vw,42px); grid-template-columns:repeat(2,minmax(0,1fr)); }
.works__grid > li:nth-child(even){ transform:translateY(clamp(22px,4vw,58px)); }
.work__link{ display:block; }
.work__link:hover .frame{ transform:translateY(-6px); border-color:var(--line-2); }
.work__link:hover .arrow{ transform:translateX(6px); }
.work__meta{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
  gap:4px 20px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.work__seg{
  grid-column:1; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.work__cta{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600;
  color:var(--steel); white-space:nowrap;
}

/* ---------- 10. Faixa de argumentos ---------- */
.ticker{
  display:flex; overflow:hidden;
  border-block:1px solid var(--line); background:var(--ink-2); padding-block:15px;
}
.ticker__track{
  display:flex; align-items:center; gap:26px; flex:none; padding-right:26px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); white-space:nowrap;
  animation:slide 36s linear infinite;
}
.ticker__track .sep{ color:var(--muted); }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }

/* ---------- 11. Números de mercado ---------- */
.stats{ padding-block:clamp(60px,7vw,104px); }
.stats__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.stat{ position:relative; padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,34px) clamp(24px,3vw,34px) 0; }
.stat + .stat{ padding-left:clamp(20px,2.4vw,34px); border-left:1px solid var(--line); }
.stat::before{ content:""; position:absolute; top:-4px; left:-4px; width:7px; height:7px; background:var(--steel); border-radius:50%; }
.stat__num{
  display:block; font-family:var(--f-display); font-weight:700; font-stretch:110%;
  font-size:clamp(3.2rem,7vw,5.6rem); line-height:.86; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; margin-bottom:16px;
}
.stat__txt{ font-size:clamp(1.02rem,1.3vw,1.2rem); max-width:24ch; }
.stat__src{ margin-top:14px; font-family:var(--f-mono); font-size:.66rem; line-height:1.55; letter-spacing:.04em; color:var(--muted); }
.stats__note{ margin-top:24px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; color:var(--muted); }

/* ---------- 12. Serviços (faixa clara) ---------- */
.services{ background:var(--paper); color:var(--ink); padding-block:clamp(66px,8vw,116px); }
.services h2{ max-width:17ch; }
.services__list{ margin-top:clamp(34px,4vw,56px); border-top:1px solid var(--line-dark); }
.service{ border-bottom:1px solid var(--line-dark); transition:background-color .35s var(--ease); }
.service:hover{ background:var(--paper-2); }
.service__row{
  display:grid; align-items:baseline; gap:8px clamp(20px,3vw,44px);
  grid-template-columns:56px minmax(0,.85fr) minmax(0,1fr) auto;
  padding-block:clamp(24px,3vw,38px);
}
.service__num{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--muted-dark); }
.service h3{ font-size:clamp(1.4rem,2.7vw,2.2rem); }
.service p{ color:var(--muted-dark); font-size:clamp(1rem,1.3vw,1.12rem); }
.service__go{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-weight:600; font-size:.92rem; color:var(--ink);
  border-bottom:1px solid var(--line-dark); padding-block:4px 5px;
}
.service__go:hover{ border-color:var(--ink); }
.service:hover .arrow{ transform:translateX(6px); }

/* ---------- 13. Processo ---------- */
.process{ padding-block:clamp(66px,8vw,116px); }
.track{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.step{ position:relative; padding:clamp(26px,3vw,40px) clamp(18px,2vw,30px) 0 0; }
.step + .step{ padding-left:clamp(18px,2vw,30px); border-left:1px solid var(--line); }
.step::before{ content:""; position:absolute; top:-4px; left:-4px; width:7px; height:7px; background:var(--steel); border-radius:50%; }
.step__num{ display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--muted); margin-bottom:14px; }
.step h3{ margin-bottom:8px; }
.step p{ color:var(--muted); font-size:.96rem; }

/* ---------- 14. Contato ---------- */
.contact{ padding-top:clamp(66px,8vw,116px); border-top:1px solid var(--line); }
.contact__top{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,64px); align-items:end;
}
.contact h2{ max-width:15ch; }
.contact .lede{ margin-top:16px; }
.contact__cta{ display:grid; gap:14px; justify-items:start; }
.contact__cta .actions{ margin-top:0; }
.contact__note{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.contact__row{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(46px,6vw,86px); border-top:1px solid var(--line);
}
.contact__row li{
  display:grid; gap:8px; align-content:start;
  padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,28px) clamp(24px,3vw,36px) clamp(16px,2vw,28px);
  border-left:1px solid var(--line);
}
.contact__row li:first-child{ border-left:0; padding-left:var(--gut); }
.contact__row .k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.contact__row .v{ font-size:1.02rem; font-weight:600; }
a.v{ justify-self:start; border-bottom:1px solid var(--line-2); padding-block:2px 4px; transition:border-color .2s var(--ease); }
a.v:hover{ border-color:var(--white); }

/* ---------- 15. Rodapé ---------- */
.site-footer{ border-top:1px solid var(--line); padding-block:30px 36px; }
.site-footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.site-footer__links{ display:flex; flex-wrap:wrap; gap:2px 22px; font-size:.9rem; color:var(--muted); }
.site-footer__links li{ padding-block:6px; }
.site-footer__links a{ display:inline-block; padding-block:2px; }
.site-footer__links a:hover{ color:var(--white); }
.site-footer__copy{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:var(--muted); }

/* ---------- 16. WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:90;
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--white); color:var(--ink); border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px); background:var(--steel); }

/* ---------- 17. Página de privacidade ---------- */
.doc{ padding-block:clamp(48px,7vw,96px); }
.doc__body{ max-width:66ch; display:grid; gap:clamp(28px,4vw,46px); margin-top:clamp(28px,4vw,48px); }
.doc__block{ display:grid; gap:14px; }
.doc__block h2{ font-size:clamp(1.25rem,2.2vw,1.6rem); }
.doc__block ul{ display:grid; gap:10px; }
.doc__block li{ position:relative; padding-left:20px; color:var(--steel); }
.doc__block li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--steel); }
.doc__note{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--muted); }
.doc__back{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:var(--steel); border-bottom:1px solid var(--line-2); padding-bottom:3px; }
.doc__back:hover{ color:var(--white); border-color:var(--white); }

/* ---------- 18. Movimento ---------- */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- 19. Trilho no computador ---------- */
@media (min-width:1100px){
  :root{ --rail:78px; }
  .rail{
    position:fixed; left:0; top:0; z-index:110;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    width:78px; height:100dvh; padding:14px 0 18px;
    background:var(--ink); border-right:1px solid var(--line);
  }
  .rail__mark img{ width:auto; height:40px; filter:contrast(1.07) brightness(1.05); }
  .rail__index{ display:grid; gap:10px; }
  .rail__index a{
    display:grid; place-items:center; min-width:34px; min-height:34px;
    font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--muted);
    transition:color .25s var(--ease);
  }
  .rail__index a{ position:relative; }
  .rail__index a i{
    position:absolute; left:calc(100% + 16px); top:50%; transform:translateY(-50%);
    font-style:normal; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
    white-space:nowrap; color:var(--white); background:var(--graphite);
    border:1px solid var(--line); padding:6px 10px;
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
  }
  .bar .brand__mark{ display:none; }
  .rail__index a:hover,.rail__index a.is-active{ color:var(--white); }
  .rail__index a.is-active::after{
    content:""; position:absolute; left:50%; bottom:1px; transform:translateX(-50%);
    width:14px; height:1px; background:var(--white);
  }
  /* o rótulo só aparece quando o ponteiro passa ou o link recebe foco */
  .rail__index a:hover i,.rail__index a:focus-visible i{ opacity:1; }
  .rail__place{
    writing-mode:vertical-rl; font-family:var(--f-mono); font-size:.63rem;
    letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0;
  }
  .rail__wa{
    width:38px; height:38px; display:grid; place-items:center;
    border:1px solid var(--line-2); color:var(--steel);
    transition:background-color .25s var(--ease), color .25s var(--ease);
  }
  .rail__wa:hover{ background:var(--white); color:var(--ink); }
  .wa-float{ display:none; }
}

/* ---------- 20. Responsivo ---------- */
@media (max-width:1000px){
  .hero__base{ grid-template-columns:1fr; align-items:start; }
  .contact__top{ grid-template-columns:1fr; align-items:start; }
  .stats__grid{ grid-template-columns:1fr; border-top:0; }
  .stat{ padding:clamp(24px,4vw,34px) 0; border-top:1px solid var(--line); }
  .stat + .stat{ padding-left:0; border-left:0; }
  .service__row{ grid-template-columns:44px minmax(0,1fr); }
  .service__row p{ grid-column:2; }
  .service__go{ grid-column:2; justify-self:start; margin-top:6px; }
  .track{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step:nth-child(3){ border-left:0; padding-left:0; }
  .step:nth-child(3),.step:nth-child(4){ margin-top:clamp(22px,3vw,32px); border-top:1px solid var(--line); }
  .contact__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact__row li:nth-child(3){ border-left:0; padding-left:var(--gut); }
  .contact__row li:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:820px){
  .works__grid{ grid-template-columns:1fr; }
  .works__grid > li:nth-child(even){ transform:none; }
}
@media (max-width:760px){
  .burger{ display:inline-flex; }
  .nav{
    position:fixed; inset:var(--bar) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 26px;
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    max-height:calc(100dvh - var(--bar)); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav a:not(.btn){ padding:16px 0; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--white); }
  .nav a:not(.btn)::after{ display:none; }
  .nav .btn{ margin-top:18px; width:100%; }

  .work__meta{ grid-template-columns:1fr; }
  .work__cta{ grid-column:1; grid-row:auto; margin-top:8px; }
  .site-footer__inner{ align-items:flex-start; flex-direction:column; gap:16px; }
}
@media (max-width:560px){
  .track{ grid-template-columns:1fr; }
  .step + .step{ border-left:0; padding-left:0; border-top:1px solid var(--line); margin-top:0; }
  .step{ padding-bottom:clamp(20px,4vw,28px); }
  .contact__row{ grid-template-columns:1fr; }
  .contact__row li{ border-left:0; border-bottom:1px solid var(--line); padding-left:var(--gut); }
  .frame__url{ font-size:.55rem; }
}

/* ---------- 21. Preferências do usuário ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .works__grid > li:nth-child(even){ transform:none; }
  .ticker{ overflow-x:auto; }
  .ticker__track{ animation:none; }
  .ticker__track[aria-hidden="true"]{ display:none; }
}
@media (prefers-contrast: more){
  :root{ --muted:#C6CBD1; --line:rgba(255,255,255,.32); --muted-dark:#3A4046; }
}
@media print{
  .bar,.rail,.wa-float,.ticker,.hero::after{ display:none !important; }
  body{ background:#fff; color:#000; padding-left:0; }
}