/* ============================================================
   STINT · componentes das secoes da landing
   Depende de tokens.css e base.css.
   ============================================================ */

/* ---------- hero ----------
   Espelha o mock: fundo asfalto, simbolo da marca em escala gigante ao fundo,
   display condensado em caixa alta, foto a direita. */
.hero {
  position: relative; isolation: isolate;
  padding-block: clamp(40px, 4.5vw, 68px) clamp(36px, 4vw, 60px);
  background: var(--bg);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
/* simbolo da marca ao fundo, o mesmo do favicon */
.hero__wall {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("/assets/icon-stint-preto.png");
  background-repeat: no-repeat;
  background-size: auto 150%;
  background-position: -10% 46%;
  opacity: .05;
}
/* no bloco escuro o simbolo precisa clarear em vez de escurecer */
.deep .hero__wall { filter: invert(1); opacity: .07; }
/* brilho verde discreto no canto superior esquerdo */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 4% 0%, var(--accent-dim) 0%, transparent 58%);
}
.hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 980px) {
  /* a foto deixa de esticar na altura do texto (era o que deixava o hero alto)
     e passa a ter proporcao fixa, com a coluna larga puxando para a borda */
  .hero__grid { grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); gap: clamp(32px,4vw,72px); align-items: center; }
}
.hero__eyebrow { margin-bottom: var(--sp-5); }
.hero h1 { max-width: 15ch; }
.hero h1 .verde { color: var(--accent); }
.hero .lead { max-width: 54ch; margin-top: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-7); }
.hero__actions .btn--ghost { border-color: transparent; padding-inline: 0; }
.hero__actions .btn--ghost:hover { background: transparent; color: var(--accent); }

/* A foto nao e um retangulo colado: ela desbota nas quatro bordas com mascara,
   entao encosta no fundo osso sem linha de corte. */
.hero__foto {
  /* proporcao igual a do arquivo (1280x748), entao o cover nao corta ninguem:
     o enquadramento ja foi decidido no recorte da foto, nao no CSS */
  position: relative; aspect-ratio: 1280/748;
  width: 100%; height: auto; max-width: 100%;
  margin-left: auto;
}
.hero__foto img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%;   /* recorte ja feito no arquivo */
  filter: saturate(1.04) contrast(1.03);          /* colorida, sem grayscale */
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 9%, #000 84%, transparent 100%),
    linear-gradient(90deg,  transparent 0%, #000 11%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
@media (max-width: 979px) {
  .hero__foto { max-width: 640px; margin-left: 0; }
}

.stats { display: grid; gap: var(--sp-6); margin-top: var(--sp-8);
  padding-top: var(--sp-6); border-top: 1px solid var(--border);
  grid-template-columns: repeat(3, minmax(0,1fr)); }
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1;
  letter-spacing: .01em;
}
.stat__l { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--muted-2); margin-top: var(--sp-3); max-width: 26ch; }
/* Mobile: os 3 numeros na MESMA linha (pedido de 11/09). O grid ja nasce com 3
   colunas; aqui so encolhe o que nao caberia em um terco de tela.
   Medido no DOM de 320 a 719px: o mais largo ("+500 mil") da 81px numa coluna
   de 85px no pior caso (320px), em 1 linha e sem overflow horizontal.
   O max-width: 26ch do rotulo TEM de virar none: em coluna estreita ele nao
   limita nada e so atrapalha a quebra. */
@media (max-width: 719px) {
  .stats { gap: var(--sp-3); }
  .stat__n { font-size: clamp(1.14rem, 0.6rem + 2.7vw, 1.95rem); }
  .stat__l { font-size: .64rem; letter-spacing: .06em; max-width: none;
    margin-top: var(--sp-2); }
}

/* ---------- scroller de frases ----------
   Duas copias do mesmo trilho deslizam lado a lado: quando a primeira sai,
   a segunda ja esta no lugar, entao o laco nao tem emenda visivel. */
.ticker {
  border-block: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  padding-block: 14px;
}
.ticker__trilho { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker__trilho { animation-play-state: paused; }
.ticker__grupo { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__item {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--muted); white-space: nowrap; padding-inline: var(--sp-6);
}
.ticker__ponto { flex: 0 0 auto; width: 5px; height: 5px; background: var(--accent); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__trilho { animation: none; }
  .ticker { overflow-x: auto; }
}

/* ---------- o espelho ----------
   Layout espelhado do mock: texto a esquerda e card a direita, e os 6 passos
   como uma cadeia horizontal continua de larguras iguais. */
/* O card sobe o equivalente ao proprio padding para que o TITULO dele fique
   na mesma linha do primeiro paragrafo. Alinhar as caixas nao basta: o recheio
   interno empurra o conteudo 32px para baixo. */
.espelho__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 860px) { .espelho__grid > .card { margin-top: calc(-1 * var(--sp-6)); } }
@media (min-width: 860px) {
  .espelho__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(32px,4vw,56px); }
}

.chain {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: clamp(20px, 2.4vw, 40px);
  margin-top: var(--sp-6);
}
.chain__item {
  position: relative;
  flex: 1 1 0; min-width: 150px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-3);
}
/* a seta mora no vao entre as caixas, por pseudo-elemento:
   assim a lista continua com 6 itens de verdade, sem item decorativo */
.chain__item:not(:last-child)::after {
  content: "\2192";
  position: absolute; top: 50%; right: calc(-1 * clamp(20px, 2.4vw, 40px));
  width: clamp(20px, 2.4vw, 40px);
  transform: translateY(-50%);
  text-align: center; color: var(--muted-2); font-size: 1rem; line-height: 1;
}
.chain__n {
  display: block;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .10em; color: var(--accent); line-height: 1;
}
.chain__t {
  display: block; margin-top: var(--sp-3);
  font-size: .85rem; font-weight: 500; line-height: 1.3; color: var(--text);
}
/* empilhado no celular: a seta lateral nao faz sentido quando quebra a linha */
@media (max-width: 859px) {
  .chain { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
  /* o min-width de 150px do item impede a coluna de encolher e estoura em 320px */
  .chain__item { min-width: 0; }
  .chain__item:not(:last-child)::after { display: none; }
}

.chain__nota { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--accent); font-weight: 500; }

.pull { border-left: 3px solid var(--accent); padding-left: var(--sp-5);
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); }
.pull cite { display: block; margin-top: var(--sp-3); font-family: var(--font-body);
  font-size: var(--fs-sm); font-style: normal; color: var(--muted-2); }

/* ---------- listas numeradas em card ---------- */
.steps { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 960px) { .steps--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.step__n { font-family: var(--font-display); color: var(--accent); font-size: var(--fs-h3); line-height:1; }
.step h3 { margin-top: var(--sp-2); }
.step p { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.step__marco { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border-2);
  font-size: var(--fs-sm); color: var(--muted-2); }

/* ---------- matriz fases x pilares ---------- */
.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
.matrix th, .matrix td { border: 1px solid var(--border); padding: 12px 14px; text-align: left; }
.matrix thead th { background: var(--card-2); font-family: var(--font-body); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; font-size: var(--fs-label); color: var(--muted-2); }
.matrix tbody th { background: var(--card); font-weight: 600; color: var(--text); white-space: nowrap; }
.matrix td { background: var(--card); text-align: center; }

/* ---------- flop ----------
   O numero vira a peca: ocupa a maior parte da largura, o texto vai para
   uma coluna estreita a direita. */
.flop { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 980px) {
  .flop { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: clamp(32px,4vw,72px); }
}
.flop__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.5rem, 1rem + 12vw, 11rem);
  line-height: .86; letter-spacing: -.045em;
  margin: 0;
}
.flop__barra { color: var(--accent); }
.flop__texto p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; max-width: 42ch; }
.flop__fecho {
  margin-top: var(--sp-5);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); line-height: 1.16; letter-spacing: -.02em;
  color: var(--text);
}
.flop__fecho .verde { color: var(--accent); display: block; }

/* ---------- cases ---------- */
.cases { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 720px) { .cases { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .cases { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.case__media { aspect-ratio: 16/10; max-width: 100%; border-radius: var(--r); margin-bottom: var(--sp-4);
  background: var(--surface-2); display: grid; place-items: center; text-align: center;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-2); padding: var(--sp-4);
  position: relative; overflow: hidden; }
/* Print do Instagram e mais largo que a caixa 16:10: contain mostra o print inteiro,
   sem cortar nem esticar, e o ::before preenche as bordas com uma versao desfocada
   do mesmo print (mesma logica do letterbox de video), pra nao sobrar moldura vazia.
   --img e a mesma imagem do <img>, setada inline em cada .case__media. */
.case__media::before {
  content: ""; position: absolute; inset: -14px;
  background-image: var(--img); background-size: cover; background-position: center;
  filter: blur(22px) brightness(.5) saturate(1.15);
}
.case__media img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: calc(var(--r) - 4px); box-shadow: 0 4px 24px rgba(0,0,0,.35); }
/* O resultado e a ancora do card: o nome vira rotulo pequeno acima dele. */
.case h3 {
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-2);
}
/* especificidade dupla: .case p (0,1,1) vence .case__metric (0,1,0) e
   sobrescreve a cor. Mesmo bug que apareceu na autoria da tese. */
.case .case__metric {
  margin-top: var(--sp-2);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); line-height: 1.14; letter-spacing: -.02em;
  color: var(--text);
}
.case .case__sub {
  margin-top: var(--sp-2); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent);
}
.case p { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- filtro ----------
   Paineis com borda leve, titulo como rotulo colorido e marcador de check/x. */
.filtro { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 860px) { .filtro { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px,3vw,40px); } }
.filtro__t {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.filtro__t--sim { color: var(--accent); }
.filtro__t--nao { color: var(--error); }
.filtro__lista { margin-top: var(--sp-4); }
.filtro__lista li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
.filtro__lista li + li { margin-top: var(--sp-3); }
.filtro__marca { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .18em; display: block; }
.filtro__marca--sim { color: var(--accent); }
.filtro__marca--nao { color: var(--error); }

/* ---------- objecoes ----------
   Linhas compactas. A pergunta aberta fica verde e o marcador vira x. */
.faq { margin-top: var(--sp-6); border-top: 1px solid var(--border-2); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-4) 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: .92rem; line-height: 1.35; letter-spacing: -.01em;
  display: flex; gap: var(--sp-4); align-items: center;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq details[open] > summary { color: var(--accent); }
.faq summary::after {
  content: "+"; margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-body); font-weight: 400; font-size: 1.15rem; line-height: 1;
  color: var(--muted-2);
}
.faq details[open] > summary::after { content: "\00d7"; color: var(--accent); }
.faq details > p {
  padding-bottom: var(--sp-5);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; max-width: 68ch;
}

/* ---------- custo ---------- */
.cost { margin-top: var(--sp-6); }
.cost li { display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.cost li:last-child { border-bottom: 0; font-weight: 600; color: var(--text); }
.cost span:last-child { color: var(--muted); white-space: nowrap; }
/* em tela muito estreita o valor com nowrap nao cabe ao lado do rotulo */
@media (max-width: 520px) {
  .cost li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cost span:last-child { white-space: normal; }
}

/* ---------- chamada final ---------- */
.final { text-align: left; }
.final .pull { border-color: var(--accent); font-size: var(--fs-h2); }

/* ---------- fecho do espelho: citacao + indicadores ---------- */
.fecho { display: grid; gap: var(--sp-6); align-items: center; margin-top: var(--sp-6); }
@media (min-width: 860px) {
  .fecho { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(32px,4vw,56px); }
}
.fecho__citacao {
  border-left: 3px solid var(--accent); padding-left: var(--sp-5); margin: 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.35rem, .95rem + 1.5vw, 2.1rem); line-height: 1.16; letter-spacing: -.02em;
}
.indic { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
.indic__item {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--card-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-4); font-size: .9rem; font-weight: 500;
}
.indic__seta { color: var(--accent); font-size: 1rem; line-height: 1; flex: 0 0 auto; }
/* Em 320px a palavra "dependencia" nao cabia na coluna de 134px e vazava pela
   borda do quadro (defeito anterior a 11/09, medido tambem na versao antiga).
   O texto e um no solto dentro de um flex, entao nao encolhe sozinho: o que
   devolve a folga e apertar o respiro e o corpo da fonte. */
@media (max-width: 400px) {
  .indic { gap: var(--sp-2); }
  .indic__item { padding: var(--sp-3); gap: var(--sp-2); font-size: .82rem; }
  .indic__seta { font-size: .9rem; }
}

/* ---------- trajetoria (A virada) ----------
   Sem card: 3 colunas sob um fio grosso, separadas por linha vertical. */
.creds {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0;
  margin-top: var(--sp-7); border-top: 2px solid var(--border-2);
}
/* dentro da coluna do texto a faixa nao cabe em 3: vira 1 por linha */
@media (max-width: 1200px) {
  .virada__grid .creds { grid-template-columns: 1fr; }
  .virada__grid .creds__item { border-left: 0; border-top: 1px solid var(--border); padding: var(--sp-4) 0 0; }
  .virada__grid .creds__item:first-child { border-top: 0; }
}
.creds__item { padding: var(--sp-5) var(--sp-5) 0; border-left: 1px solid var(--border); }
.creds__item:first-child { border-left: 0; padding-left: 0; }
.creds__n {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em;
}
.creds__d { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
@media (max-width: 720px) {
  .creds { grid-template-columns: 1fr; }
  .creds__item { border-left: 0; border-top: 1px solid var(--border);
    padding: var(--sp-5) 0 0; }
  .creds__item:first-child { border-top: 0; }
}

/* ---------- A tese ---------- */
.tese__cit { border-left: 3px solid var(--accent); padding-left: var(--sp-5); margin: var(--sp-6) 0 0; }
.tese__cit p {
  margin: 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.2rem, .9rem + 1.2vw, 1.85rem); line-height: 1.18; letter-spacing: -.02em;
}
/* especificidade dupla de proposito: sem isto a regra .tese__cit p acima
   vence e a autoria sai no tamanho do display */
.tese__cit .tese__autor {
  margin-top: var(--sp-3);
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-2);
}

/* exemplos: sem card, so fio no topo de cada coluna */
.exemplos { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 860px) { .exemplos { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px,3vw,48px); } }
.exemplos__item { border-top: 1px solid var(--border-2); padding-top: var(--sp-4); }
.exemplos__n {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .10em;
  color: var(--accent); line-height: 1;
}
.exemplos__nome {
  margin-top: var(--sp-3);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em;
}
.exemplos__d { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* dados de pesquisa: caixas lado a lado */
.pesquisa { margin-top: var(--sp-7); }
.pesquisa__item {
  /* sem max-width: quem limita e a coluna onde a caixa vive.
     Na secao da tese ela ocupa a largura inteira; no espelho, a coluna da direita. */
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-5); margin: 0;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
}
.pesquisa__item strong { color: var(--text); font-weight: 600; }
.pesquisa__fonte { display: block; margin-top: var(--sp-2); color: var(--muted-2); }

/* ---------- O metodo: fases ----------
   Sem card: colunas com fio no topo, numero em verde antes do nome. */
.fases { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 860px) { .fases { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px,3vw,48px); } }
.fases__item { border-top: 1px solid var(--border-2); padding-top: var(--sp-4); }
.fases__cab { display: flex; align-items: baseline; gap: var(--sp-3); }
/* letra unica (A/D/R) precisa de mais corpo que os "01/02/03" que havia antes */
.fases__n { font-size: 1rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.fases__nome {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em;
}
.fases__d { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.fases__marco { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted-2); line-height: 1.6; font-style: italic; }

/* ---------- O metodo: matriz + painel do pilar, lado a lado ---------- */
.metodo__base { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); align-items: start; }
@media (min-width: 980px) { .metodo__base { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,4vw,64px); } }

.matriz__rotulo {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted-2); line-height: 1.5;
}
/* Entregas de cada elo, dentro do proprio card do elo.
   Nomenclatura vinda do Cronograma do StintHub, nao inferida. */
.fases__entregas { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--border); }
.fases__entregas li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
}
.fases__entregas li + li { margin-top: var(--sp-2); }
.fases__entregas li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 6px; border-radius: 1px; background: var(--accent);
}
.adr__nota { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--muted-2); line-height: 1.5; }

.pilar {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
  padding: var(--sp-5);
}
.pilar__nome {
  margin-top: var(--sp-3);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em;
}
.pilar__d { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* ---------- A entrega ----------
   Pilares sem card, no mesmo tratamento dos elos: fio no topo e nome em display.
   Os dois paineis de baixo usam borda leve, nao card com sombra. */
.entrega { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 860px) { .entrega { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px,3vw,48px); } }
.entrega__item { border-top: 1px solid var(--border-2); padding-top: var(--sp-4); }
/* icone no lugar do numero: alinhamento passa a ser center, baseline
   nao funciona com elemento grafico ao lado de texto */
.entrega__cab { display: flex; align-items: center; gap: var(--sp-3); }
.entrega__icone { flex: 0 0 auto; width: 24px; height: 24px; color: var(--accent); display: block; }
.entrega__nome {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em;
}
.entrega__d { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

.paineis { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); align-items: start; }
@media (min-width: 860px) { .paineis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px,3vw,40px); } }
.painel { border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-5); }
.painel__t {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent);
}
.painel__d { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }
.painel__d strong { color: var(--text); font-weight: 600; }
.custo { margin-top: var(--sp-4); }
.custo li {
  display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted);
}
.custo li:last-child { border-bottom: 0; color: var(--text); font-weight: 600; }
.custo li:last-child .custo__v { color: var(--accent); }
.custo__v { text-align: right; white-space: nowrap; }
@media (max-width: 520px) {
  .custo li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .custo__v { white-space: normal; text-align: left; }
}

/* ---------- A virada: texto + slots de foto ----------
   Slot vazio mostra o rotulo. Para colocar a foto, troque o <span> por
   <img src="..." alt="...">: o CSS ja cuida do recorte e do preto e branco. */
.virada__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 980px) {
  .virada__grid { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(32px,4vw,56px); }
}
/* Mobile: uma foto ANTES do texto e a outra DEPOIS (pedido de 11/09).
   Os dois slots moram no mesmo .slots, entao no empilhado eles cairiam juntos
   no fim. display:contents dissolve esse involucro e promove os 2 <figure> a
   itens do proprio .virada__grid, que e onde o order consegue separa-los.
   Vale so abaixo de 980px: no desktop o .slots continua sendo a coluna direita. */
@media (max-width: 979px) {
  .virada__grid .slots { display: contents; }
  .virada__grid .slot:first-child   { order: 1; }
  .virada__grid > div:first-child   { order: 2; }
  .virada__grid .slot:last-child    { order: 3; }
}
.slots { display: grid; gap: var(--sp-3); }
.slot {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border: 1px dashed var(--border-2); border-radius: var(--r);
  display: grid; place-items: center; text-align: center; padding: var(--sp-4);
}
.slot__rotulo {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted-2); line-height: 1.5;
}
.slot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.slot:has(img) { border-style: solid; border-color: var(--border); }

/* ---------- modo galeria no mobile (pedido de 11/09) ----------
   Quatro blocos (A tese, O metodo, Cases, A entrega) empilhavam os itens um
   embaixo do outro e sozinhos respondiam por 32% da altura da pagina em 390px.
   No lugar disso eles viram uma faixa que desliza de lado com encaixe.
   Em CSS puro: o site nao tem uma linha de JS e continua sem.

   Como funciona: o grid passa a fluir em coluna (grid-auto-flow), cada item
   ocupa 86% da largura, e o que sobra deixa o proximo card espiando na borda,
   que e a unica dica de que ha mais para o lado. O scroll-snap prende o card
   no lugar quando o dedo solta.

   Os limites acompanham os que ja existiam: 860px para tese/metodo/entrega,
   720px para cases, que vira 2 colunas mais cedo. */
@media (max-width: 859px) {
  .exemplos, .fases, .entrega {
    grid-auto-flow: column;
    grid-auto-columns: 86%;   /* 1 card por vez, com o proximo espiando */
    overflow-x: auto;
    overscroll-behavior-x: contain;      /* nao arrasta a pagina junto */
    scroll-snap-type: x mandatory;
    gap: var(--sp-5);
    padding-bottom: var(--sp-4);         /* espaco para a faixa nao cortar sombra */
    scrollbar-width: none;               /* Firefox */
    -ms-overflow-style: none;
  }
  .exemplos::-webkit-scrollbar,
  .fases::-webkit-scrollbar,
  .entrega::-webkit-scrollbar { display: none; }
  .exemplos__item, .fases__item, .entrega__item { scroll-snap-align: start; }
}
@media (max-width: 719px) {
  .cases {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cases::-webkit-scrollbar { display: none; }
  .cases > .case { scroll-snap-align: start; }
}

/* Acima de 600px um card de 665px fica largo demais para faixa: mostra 2 por vez.
   Medido em 719px: cada card cai de 557px para 310px, que e a largura de leitura. */
@media (min-width: 601px) and (max-width: 859px) {
  .exemplos, .fases, .entrega { grid-auto-columns: 48%; }
}
@media (min-width: 601px) and (max-width: 719px) {
  .cases { grid-auto-columns: 48%; }
}

/* ---------- controles da galeria (botoes nas laterais) ----------
   O trilho fica entre os dois botoes, e nao mais com eles embaixo: o cartao
   ocupa 100% do vao central, entao ele nasce centrado entre as duas setas.
   O deslize com o dedo continua valendo; os botoes sao criados pelo galeria.js
   e somem sozinhos onde nao ha o que rolar (desktop). */
.gal { min-inline-size: 0; }
@media (max-width: 859px) {
  .gal:not(.gal--cases) { display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: var(--sp-2); }
}
@media (max-width: 719px) {
  .gal--cases { display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: var(--sp-2); }
}
.gal--parado { display: block; }

/* 🔴 O `hidden` sozinho NAO esconde este botao: a regra `.gal__btn{display:grid}`
   abaixo vence o `display:none` que o navegador da ao atributo hidden, e no
   desktop as setas apareciam soltas em volta das 3 colunas. Precisa das duas
   saidas: o atributo (que tem mais peso por ser seletor de atributo) e a classe
   do wrapper parado. Medir isso exige olhar a CAIXA do elemento; ler `.hidden`
   no DOM devolve true e mente. */
.gal__btn[hidden],
.gal--parado .gal__btn { display: none; }

.gal__btn {
  inline-size: 38px; block-size: 38px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--border-2); border-radius: 50%;
  background: var(--card); color: var(--text);
  cursor: pointer; padding: 0;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.gal__btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-dim); }
.gal__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gal__btn:disabled { opacity: .28; cursor: default; }
.gal__btn svg { inline-size: 17px; block-size: 17px; display: block; }
/* o alvo de toque vai a 44px sem o desenho crescer: a area invisivel passa por
   fora do circulo, que e o que o dedo agradece em tela pequena */
.gal__btn::after {
  content: ''; position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 44px; block-size: 44px;
}
.gal__btn { position: relative; }

.gal__conta {
  margin-top: var(--sp-3); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* Com seta dos dois lados a espiada perde a funcao: quem avisa que ha mais e o
   proprio botao. O cartao passa a ocupar o vao inteiro, e fica centrado. */
@media (max-width: 600px) {
  .exemplos, .fases, .entrega, .cases { grid-auto-columns: 100%; }
}