/* strapasson.dev · direção Módulo. Cores só por papel (tokens.css); lei visual em C:\psds\brand-v2\DESIGN.md */

:root {
  --max: 1728px;           /* 18 módulos */
  --pad: 16px;
  --m: 96px;               /* módulo da grade */
  --grid-c: rgba(213, 216, 214, .55);
  --box-bg: var(--grafite);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-2: 0 2px 4px rgba(22, 24, 27, .06), 0 24px 48px -12px rgba(22, 24, 27, .22), 0 60px 90px -40px rgba(22, 24, 27, .3);
}
@media (min-width: 768px) { :root { --pad: 32px; } }
@media (min-width: 1200px) { :root { --pad: 96px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --box-bg: var(--superficie-escura); }
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-theme] { --grid-c: rgba(48, 52, 58, .7); }
}
:root[data-theme="dark"] { --box-bg: var(--superficie-escura); }
[data-theme="dark"] { --grid-c: rgba(48, 52, 58, .7); }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--bg); }

.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: var(--pad); top: -64px; z-index: 10; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 16px; }

/* tipografia */
.label, .mono { font-family: var(--font-mono); }
.label { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.h1 { font-size: clamp(2.5rem, 0.5rem + 3.75vw, 4.5rem); line-height: 1.03; letter-spacing: -0.028em; }
.h2 { font-size: clamp(2rem, 1.3rem + 2vw, 3.5rem); line-height: 1.05; letter-spacing: -0.024em; }
.h3 { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--ink-muted); max-width: 40em; }
.muted { color: var(--ink-muted); }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 20px; border-radius: 4px;
  font: 500 16px/1.2 var(--font-sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background-color .2s, border-color .2s, color .2s;
}
.btn-primary { background: var(--signal); color: var(--on-signal); }
.btn-primary:hover { background: var(--vermelho-tinta); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

/* grade visível (peças de marca: topo e fechamento) */
.grade { position: relative; overflow-x: clip; }
.grade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-c) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-c) 1px, transparent 1px);
  background-size: var(--m) var(--m);
  /* uma linha passa exatamente na borda do conteúdo (100% aqui = largura - módulo) */
  background-position: max(var(--pad), calc((100% + var(--m) - var(--max)) / 2 + var(--pad))) 0;
}
.grade > * { position: relative; }

/* topo */
.topo { height: var(--m); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; color: var(--ink); padding-block: 12px; }
.logo svg { width: 176px; height: auto; aspect-ratio: 873 / 100.75; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; padding-block: 12px; }
.nav a:hover { color: var(--signal-text); }
.nav .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
/* abaixo de 1024 px os links das seções descem para uma linha própria; o Contato fica no alto, ao lado do logo */
@media (max-width: 1023px) {
  .topo { height: auto; flex-wrap: wrap; row-gap: 0; }
  .topo .logo { min-height: var(--m); align-items: center; }
  .nav { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; }
  .nav .btn { position: absolute; top: calc((var(--m) - 44px) / 2); right: var(--pad); }
}
@media (min-width: 1024px) { .logo svg { width: 200px; } }

/* hero */
.hero { border-bottom: 1px solid var(--line); }
.hero-corpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-texto { padding-block: 48px 64px; display: flex; flex-direction: column; justify-content: center; }
.hero-texto .label { margin-bottom: 28px; }
.hero-texto .h1 { max-width: 13.5em; }
.hero-texto .lead { margin-top: 28px; max-width: 34em; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.acoes-nota { margin-top: 10px; }
@media (max-width: 479px) { .hero .acoes .btn { flex: 1 1 100%; } }
.acoes-nota a { text-decoration: none; display: inline-block; padding-block: 6px; }
.acoes-nota a:hover { color: var(--ink); }
.hero-3d {
  margin-inline: calc(-1 * var(--pad)); aspect-ratio: 1 / 1;
  border-block: 1px solid var(--line);
  background: var(--bg) url("../img/hero-claro.webp") center / cover no-repeat;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-3d { background-image: url("../img/hero-escuro.webp"); } }
:root[data-theme="dark"] .hero-3d { background-image: url("../img/hero-escuro.webp"); }

.faixa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faixa > div { padding: 24px 16px 20px 0; min-height: var(--m); display: flex; flex-direction: column; gap: 6px; }
.faixa dd { font-weight: 500; font-size: 15px; line-height: 1.35; }
@media (max-width: 767px) { .faixa > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

@media (min-width: 768px) {
  .hero-3d { aspect-ratio: auto; height: min(62.5vw, 640px); }
  .faixa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .hero .wrap.hero-corpo { width: auto; max-width: none; padding-right: 0;
    padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
    grid-template-columns: minmax(0, calc(6 * var(--m))) var(--m) minmax(0, 1fr); min-height: calc(7 * var(--m)); }
  .hero-texto { grid-column: 1; justify-content: flex-start; padding-block: calc(var(--m) + 20px) 48px; }
  .hero-3d { grid-column: 3; margin: 0; height: auto; border-block: 0; border-left: 1px solid var(--line); }
  .faixa { grid-template-columns: repeat(4, calc(3 * var(--m))); border-top: 1px solid var(--line); }
  .hero-texto .label { margin-bottom: 32px; }
}
/* a coluna de texto cresce com a tela; a do 3D fica larga o bastante para a peça inteira (cover) */
@media (min-width: 1440px) { .hero .wrap.hero-corpo { grid-template-columns: minmax(0, calc(7 * var(--m))) var(--m) minmax(0, 1fr); } }
@media (min-width: 1600px) { .hero .wrap.hero-corpo { grid-template-columns: minmax(0, calc(8 * var(--m))) var(--m) minmax(0, 1fr); } }

/* seções */
.secao { padding-block: clamp(72px, 6vw + 40px, 128px); border-bottom: 1px solid var(--line); }
.secao-cab { display: grid; gap: 24px; margin-bottom: clamp(40px, 4vw, 72px); }
.label b { color: var(--ink); font-weight: 500; margin-right: 1.6em; }
.secao-cab .h2 { max-width: 16em; }
@media (min-width: 1024px) {
  .secao-cab, .tela { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-6); }
  .secao-cab { align-items: baseline; }
  .secao-cab > * { grid-column: 2 / -1; }
  .secao-cab .label { grid-column: 1; grid-row: 1; padding-top: .9em; }
  .secao-cab .lead { margin-top: 24px; }
  .recuo { margin-left: calc((100% - 3 * var(--space-6)) / 4 + var(--space-6)); }
}

/* 01 · o que é construído */
.frentes { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6); }
.frente { border-top: 1px solid var(--line); padding: 20px 0 40px; display: grid; gap: 10px; align-content: start; }
.frente .mono { font-size: 13px; color: var(--ink-muted); }
.frente .h3 { margin-top: 12px; }
.frente .ex { margin-top: 10px; font-size: 15px; color: var(--ink-muted); }
.frente .ex .label { display: block; margin-bottom: 4px; font-size: 11px; }
@media (min-width: 640px) { .frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .frentes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .frente { padding-bottom: 56px; } }

.tela { margin-top: clamp(48px, 5vw, 96px); display: grid; gap: 20px; }
.aparelho { background: var(--grafite); padding: clamp(6px, .8vw, 12px); border-radius: 8px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--aco); }
.aparelho img { border-radius: 3px; width: 100%; }
.tela figcaption { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.tela figcaption p { color: var(--ink-muted); max-width: 44em; }
@media (min-width: 1024px) { .tela .aparelho { grid-column: 2 / -1; } .tela figcaption { grid-row: 1; grid-column: 1; flex-direction: column; } }

/* 02 · para quem */
.sinais { counter-reset: s; }
.sinal { border-top: 1px solid var(--line); padding-block: 24px 28px; display: grid; gap: 10px 24px; }
.sinal:last-child { border-bottom: 1px solid var(--line); }
.sinal-id { display: flex; gap: 24px; align-items: baseline; }
.sinal-id .mono { font-size: 13px; color: var(--ink-muted); min-width: 24px; }
.sinal p { color: var(--ink-muted); max-width: 38em; }
@media (min-width: 1024px) {
  .sinal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px var(--space-6); padding-block: 28px 32px; align-items: baseline; }
  .sinal .h3, .sinal p { grid-column: 2 / -1; }
  .sinal-id { grid-row: 1 / span 2; }
}

/* 03 · processo */
.etapas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px var(--space-6); }
.etapa { position: relative; display: grid; gap: 12px; align-content: start; }
.etapa::before { content: ""; width: 24px; height: 24px; border: 1.5px solid var(--ink); margin-bottom: 20px; }
.etapa.acesa::before { background: var(--signal); border-color: var(--signal); }
.etapa .h3 { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); letter-spacing: -0.024em; line-height: 1.05; }
.etapa p { color: var(--ink-muted); max-width: 22em; }
@media (min-width: 768px) {
  .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etapa::after { content: ""; position: absolute; top: 11.5px; left: 36px; right: 12px; height: 1px; background: var(--line); }
}
.contrato { margin-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--ink); padding-top: 20px; display: grid; gap: 24px; }
.contrato dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--space-6); }
.contrato dt { font-size: clamp(1.375rem, 1.1rem + .8vw, 2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.contrato dd { color: var(--ink-muted); margin-top: 6px; }
.contrato .nota { color: var(--ink-muted); max-width: 44em; }
@media (min-width: 768px) { .contrato dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .contrato .nota { margin-left: calc((100% - 3 * var(--space-6)) / 4 + var(--space-6)); } }

/* 04 · quem constrói */
.quem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.ficha { background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 32px 24px 8px; display: flex; flex-direction: column; gap: 40px; }
.ficha .ano { font: 500 clamp(6rem, 3rem + 9vw, 10.5rem)/.9 var(--font-mono); letter-spacing: -0.06em; margin-top: 12px; }
.ficha dl { display: grid; }
.ficha dl div { border-top: 1px solid var(--line); padding-block: 16px; display: grid; gap: 6px; }
.ficha dl div:first-child { border-top-color: var(--ink-muted); }
.ficha dd { font-weight: 500; line-height: 1.35; }
.quem-texto .h2 { max-width: 12em; margin-top: 24px; }
.quem-bio { margin-top: 28px; max-width: 38em; font-size: 18px; color: var(--ink-muted); }
.provas { margin-top: 40px; }
.provas li { border-top: 1px solid var(--line); padding-block: 22px 24px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; }
.provas li:last-child { border-bottom: 1px solid var(--line); }
.provas .mono { font-size: 13px; color: var(--ink-muted); padding-top: .35em; grid-row: span 2; }
.provas p { color: var(--ink-muted); }
@media (min-width: 1024px) {
  .quem { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .ficha {
    --fx: 48px; align-self: start; height: calc(7 * var(--m)); padding: 0 var(--fx); gap: 0; justify-content: space-between;
    margin-right: calc(var(--m) - var(--space-6));
    background-image: linear-gradient(to right, var(--grid-c) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-c) 1px, transparent 1px);
    background-size: var(--m) var(--m); background-position: var(--fx) 0;
  }
  .ficha > div { padding-top: 44px; }
  .ficha dl div { height: var(--m); padding-block: 0; align-content: center; }
}

/* 05 · sem caixa-preta (caixa de destaque) */
.destaque { position: relative; background: var(--box-bg); color: var(--ink); padding: 56px 24px 40px; }
.destaque::before { content: ""; position: absolute; left: 0; top: 0; width: var(--m); height: 12px; background: var(--signal); }
.destaque .h2 { max-width: 12em; }
.destaque .lead { margin-top: 20px; }
.principios { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-6); }
.principios li { border-top: 1px solid var(--ink-muted); padding-block: 16px 28px; display: grid; gap: 10px; align-content: start; }
.principios .mono { font-size: 13px; color: var(--ink-muted); }
.principios p { font-size: 18px; line-height: 1.4; font-weight: 500; }
.destaque .nota { margin-top: 24px; color: var(--ink-muted); max-width: 46em; }
@media (min-width: 768px) { .principios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .destaque { padding: var(--m); } .principios { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; } }

/* 06 · perguntas */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 24px; align-items: center;
  padding-block: 22px; font-size: clamp(1.125rem, 1rem + .35vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; justify-self: end; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:hover { color: var(--signal-text); }
.faq details p { padding-bottom: 28px; color: var(--ink-muted); max-width: 44em; }

/* 07 · contato (fechamento em Grafite) */
.fecho { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.fecho-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: var(--m); }
.detalhe { display: none; }
.fecho .h2 { font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.5rem); line-height: 1.03; letter-spacing: -0.028em; }
.fecho .lead { margin-top: 24px; }
.canais { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.canais a { display: grid; gap: 8px; padding-block: 20px; text-decoration: none; border-bottom: 1px solid var(--line); }
.canais .valor { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.canais a:hover .valor { color: var(--signal-text); }
.fecho .acoes { margin-top: 40px; align-items: center; }
@media (min-width: 768px) { .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); } }
@media (min-width: 1024px) {
  .fecho-corpo { grid-template-columns: calc(4 * var(--m)) minmax(0, 1fr); gap: var(--m); padding-block: var(--m); }
  .detalhe { display: block; width: 100%; height: calc(6 * var(--m)); object-fit: cover; }
}

/* rodapé */
.rodape { padding-block: 48px 40px; font-size: 15px; }
.rodape-grade { display: grid; gap: 28px; }
.rodape .logo svg { width: 176px; }
.rodape p { color: var(--ink-muted); }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--signal-text); }
.rodape .contatos { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--ink); }
.rodape .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .rodape-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--space-6); }
  .rodape .contatos { grid-column: 3 / -1; }
  .rodape .contatos { flex-direction: column; }
  .rodape .legal { margin-top: 24px; }
}

/* páginas simples (404, privacidade) */
.pagina { padding-block: var(--m) calc(1.5 * var(--m)); min-height: calc(100svh - 2 * var(--m) - 180px); }
.pagina .label { margin-bottom: 24px; }
.pagina .h1 { max-width: 14em; }
.pagina .lead { margin-top: 24px; }
.texto { max-width: 42em; margin-top: 56px; display: grid; gap: 16px; }
.texto h2 { font-size: 22px; letter-spacing: -0.01em; margin-top: 24px; }
.texto p, .texto li { color: var(--ink-muted); }
.texto ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 6px; }

/* movimento: entrada de bloco (só na tela, com JS e sem reduzir movimento; na impressão tudo aparece) */
@media screen and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .rv.in { opacity: 1; transform: none; }
}