/* matheuSimas · site v1. Cores vêm de tokens.css; nada de valor de cor solto aqui. */
@font-face{font-family:'Space Grotesk';src:url(../assets/fonts/SpaceGrotesk-VF.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../assets/fonts/IBMPlexMono-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../assets/fonts/IBMPlexMono-Medium.woff2) format('woff2');font-weight:500;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--fonte-texto);font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img,picture{display:block;max-width:100%;height:auto}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--fonte-titulo);text-wrap:balance}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:2px}
::selection{background:var(--brand);color:var(--sobre-brand)}

.pular{position:absolute;left:1rem;top:-4rem;padding:.75rem 1rem;background:var(--brand);color:var(--sobre-brand);text-decoration:none;z-index:10;transition:top .15s}
.pular:focus{top:1rem}

.wrap{width:min(100% - 2*clamp(1.25rem,5vw,3rem),70rem);margin-inline:auto}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.5rem}
.topo__marca{display:block;line-height:0}
.topo__marca img{height:2.25rem;width:auto}
/* logo segue o tema da página: claro por padrão; escuro no sistema escuro (automático) ou com data-theme="dark" */
.logo--escuro{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo--claro{display:none}
  :root:not([data-theme="light"]) .logo--escuro{display:block}
}
:root[data-theme="dark"] .logo--claro{display:none}
:root[data-theme="dark"] .logo--escuro{display:block}
:root[data-theme="light"] .logo--claro{display:block}
:root[data-theme="light"] .logo--escuro{display:none}
.topo__acoes{display:flex;align-items:center;gap:.25rem}
.topo--so-tema{justify-content:flex-end}
.topo__nav{display:flex;gap:.25rem}
.topo__nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:.75rem;color:var(--apoio);text-decoration:none;font-size:.875rem}
.topo__nav a:hover{color:var(--texto)}

/* botão de tema (aparece só com JS) */
.tema{touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;padding:0;background:transparent;color:var(--apoio);border:0;border-radius:.5rem;cursor:pointer}
.tema:hover{color:var(--texto);background:color-mix(in srgb,var(--apoio) 14%,transparent)}
.tema[hidden]{display:none}
.tema svg{width:1.375rem;height:1.375rem}
.tema g{display:none}
.tema[data-estado="auto"] .tema__auto,.tema[data-estado="light"] .tema__claro,.tema[data-estado="dark"] .tema__escuro{display:inline}

/* herói */
.heroi{padding-block:clamp(3.5rem,11vw,9rem) clamp(3rem,8vw,6rem)}
.selo{display:inline-block;padding:.35rem .75rem;background:var(--brand-detalhe);color:var(--fundo);font-size:.8125rem;font-weight:500;letter-spacing:.02em;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.heroi h1{font-weight:700;font-size:clamp(2.5rem,9.5vw,6.5rem);line-height:1;letter-spacing:-.035em;max-width:14ch}
.heroi__sub{margin-top:clamp(1rem,2.5vw,1.75rem);font-family:var(--fonte-titulo);font-weight:300;font-size:clamp(1.5rem,4.2vw,2.75rem);line-height:1.15;letter-spacing:-.02em;color:var(--apoio)}
.heroi__acoes{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}

.botao{touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.75rem 1.75rem;background:var(--brand);color:var(--sobre-brand);font-family:var(--fonte-texto);font-weight:500;font-size:1rem;text-decoration:none;border:0;border-radius:.5rem;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.botao:hover{filter:brightness(1.08);transform:translateY(-1px)}
.botao:active{transform:none}
.botao svg{width:1.125rem;height:1.125rem;flex:none}
.heroi__nota{font-size:.875rem;color:var(--apoio)}

/* seções */
.secao{scroll-margin-top:1rem;padding-block:clamp(3rem,7vw,6rem);border-top:1px solid color-mix(in srgb,var(--apoio) 35%,transparent)}
.rotulo{display:flex;align-items:center;gap:.75rem;margin-bottom:clamp(1.5rem,3vw,2.5rem);font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--apoio)}
.rotulo::before{content:"";width:.75rem;height:.75rem;background:var(--brand-detalhe);flex:none}
.secao h2{font-weight:700;font-size:clamp(1.75rem,4.5vw,3rem);line-height:1.08;letter-spacing:-.025em;max-width:22ch}

.servicos{list-style:none;margin:clamp(2rem,4vw,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr));gap:1rem}
.servicos li{background:var(--superficie);padding:1.5rem;border-radius:.75rem;display:flex;flex-direction:column;gap:.75rem}
.servicos h3{font-weight:700;font-size:1.375rem;line-height:1.2;letter-spacing:-.01em;color:var(--texto)}
.servicos p{font-size:.9375rem;color:var(--apoio)}

.metodo{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start}
.metodo__texto{display:grid;gap:1.25rem;max-width:40rem}
.metodo__texto p{font-family:var(--fonte-titulo);font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.5;font-weight:400}
.papeis{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:color-mix(in srgb,var(--apoio) 35%,transparent);border-radius:.75rem;overflow:hidden}
.papeis li{background:var(--superficie);padding:1.1rem 1.5rem;display:grid;gap:.15rem}
.papeis span{font-size:.8125rem;color:var(--apoio)}
.papeis strong{font-weight:500;font-size:1rem}

/* contato */
.contato{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.email{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.email__texto{font-size:clamp(1rem,2.4vw,1.25rem);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.copiar{touch-action:manipulation;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1rem;background:transparent;color:var(--brand);border:1.5px solid var(--brand);border-radius:.5rem;font:inherit;font-size:.875rem;font-weight:500;cursor:pointer}
.copiar:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.copiar svg{width:1rem;height:1rem}
.copiar[hidden]{display:none}
.aviso{position:absolute;top:100%;left:0;margin:.25rem 0 0;font-size:.875rem;color:var(--apoio)}

/* rodapé */
.rodape{border-top:1px solid color-mix(in srgb,var(--apoio) 35%,transparent);padding-block:2rem 3rem;font-size:.875rem;color:var(--apoio)}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.rodape a{color:var(--brand);text-underline-offset:.2em}
.rodape a:hover{text-decoration-thickness:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .botao:hover{transform:none}
}
@media (max-width:30rem){
  .topo__marca img{height:1.75rem}
  .topo__nav a{padding-inline:.5rem}
  .botao{width:100%}
}