/* Blocos deste site, na ordem em que aparecem na página. Composição herdada do conceito da Ourograf (_projeto/projeto.md). */

/* Faixa "site de exemplo": clara, acima do cabeçalho escuro, para ninguém achar que a gráfica existe */
.aviso-exemplo {
  background: var(--color-aviso-bg);
  color: var(--color-aviso-texto);
  font-size: var(--text-sm);
  -webkit-font-smoothing: auto;
}
.aviso-exemplo__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); }
.aviso-exemplo a { color: var(--color-aviso-link); }
.aviso-exemplo .link-icone svg { width: 16px; height: 16px; }
.aviso-exemplo .link-icone:hover span { text-decoration: underline; }

/* Cabeçalho: nome com a mini lona + aberto/fechado */
.site-header__inner { min-height: 4.5rem; }
.cabecalho__marca { display: grid; gap: 0; }
.marca {
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding-top: var(--space-2);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.marca__lona { width: 0.8em; height: auto; flex-shrink: 0; }
.ml-pano { fill: var(--color-lona); }
.ml-faixa { fill: var(--color-verde); }
.ml-bastao { fill: var(--color-bastao); }
.ml-rolo { fill: var(--color-rolo); }
.cabecalho__nav { display: none; }
.cabecalho__cta { padding-inline: var(--space-4); }
@media (min-width: 900px) {
  .site-header__inner { min-height: 5rem; }
  .cabecalho__nav { display: flex; gap: var(--space-2); margin-left: auto; }
  .cabecalho__nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding-inline: var(--space-3);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--duration-small) var(--ease-out);
  }
  .cabecalho__nav a:hover { color: var(--color-verde); }
}

/* Topo: a marca em destaque e a lona impressa que se desenrola, sobre o fundo facetado */
.topo {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  padding-block: var(--space-8) var(--space-12);
}
.topo__facetas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.topo__facetas .f1 { fill: var(--color-faceta-1); }
.topo__facetas .f2 { fill: var(--color-faceta-2); }
.topo__facetas .f3 { fill: var(--color-faceta-3); }

/* Celular: a lona fica no espaço acima do título, à direita, e o título sobe um pouco sobre o rolo (o contorno escuro das letras mantém a leitura) */
/* Tamanho do título e da lona crescem juntos com a tela */
.topo__grade {
  --titulo: clamp(2.6rem, 8vw + 1rem, 6.25rem);
  --lona: min(46vw, 15rem);
  position: relative;
  display: grid;
}
.lona {
  position: absolute;
  top: var(--space-4);
  right: -4%;
  width: var(--lona);
  overflow: visible;
}
.lona__peca { transform-box: view-box; transform-origin: 220px 46px; rotate: -6deg; }
.lona__pano { fill: var(--color-lona); }
.lona__faixa { fill: var(--color-verde); }
.lona__texto { fill: var(--color-lona-tinta); font-family: var(--font-display); font-weight: 800; }
.lona__ilhos { fill: var(--color-ilhos); }
.lona__bastao { fill: var(--color-bastao); }
.lona__rolo rect { fill: var(--color-rolo); }
.lona__rolo .lona__brilho { fill: var(--color-lona); }
/* Desenrola uma vez: o pano cresce a partir do bastão e o rolo desce junto com a borda */
.lona__folha {
  transform-box: view-box;
  transform-origin: 220px 52px;
  animation: lona-desce 1100ms var(--ease-out) 150ms both;
}
.lona__rolo { animation: rolo-desce 1100ms var(--ease-out) 150ms both; }
@keyframes lona-desce { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes rolo-desce { from { translate: 0 -276px; } to { translate: 0 0; } }

.topo__texto { position: relative; }
.topo__titulo {
  margin-block: calc(0.78 * var(--lona)) var(--space-6);
  font-size: var(--titulo);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  /* Contorno arredondado: sombras em círculo (text-stroke deixa cantos pontudos) */
  text-shadow:
    0.07em 0.0em 0 var(--color-bg),
    0.065em 0.027em 0 var(--color-bg),
    0.049em 0.049em 0 var(--color-bg),
    0.027em 0.065em 0 var(--color-bg),
    0.0em 0.07em 0 var(--color-bg),
    -0.027em 0.065em 0 var(--color-bg),
    -0.049em 0.049em 0 var(--color-bg),
    -0.065em 0.027em 0 var(--color-bg),
    -0.07em 0.0em 0 var(--color-bg),
    -0.065em -0.027em 0 var(--color-bg),
    -0.049em -0.049em 0 var(--color-bg),
    -0.027em -0.065em 0 var(--color-bg),
    -0.0em -0.07em 0 var(--color-bg),
    0.027em -0.065em 0 var(--color-bg),
    0.049em -0.049em 0 var(--color-bg),
    0.065em -0.027em 0 var(--color-bg);
}
.topo__destaque { color: var(--color-verde); }
.topo__sub { max-width: 36rem; font-size: var(--text-lg); }
.topo__cta { margin-top: var(--space-6); }

@media (min-width: 900px) {
  .topo { align-items: center; min-height: calc(100svh - 7rem); padding-block: var(--space-16); }
  .topo__grade {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
  }
  .lona { position: static; order: 2; width: 100%; max-width: 440px; justify-self: center; }
  .topo__titulo { margin-top: var(--space-3); text-shadow: none; }
}

/* Peças: fita de tipos de peça (na Ourograf, trabalhos reais com o nome do cliente; aqui, sem cliente, foto de banco) */
.pecas { background: var(--color-bg-alt); }
.pecas__titulo {
  max-width: 18ch;
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.pecas__sub { max-width: 36rem; margin-top: var(--space-3); font-size: var(--text-lg); }
.pecas__fita {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: 0 var(--container-padding) var(--space-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-padding);
  scrollbar-width: none;
}
@media (hover: hover) and (pointer: fine) {
  .pecas__fita { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
}
@media (min-width: 1264px) {
  .pecas__fita { padding-inline: calc((100% - var(--container-max)) / 2); }
}
.peca {
  display: flex;
  flex: 0 0 min(66vw, 270px);
  flex-direction: column;
  scroll-snap-align: start;
}
.peca img {
  width: 100%;
  aspect-ratio: 9 / 14;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.peca__nome {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
}
.peca__uso { line-height: 1.4; color: var(--color-text-muted); }
/* Com as 5 peças cabendo na largura, a fita ocupa o container inteiro */
@media (min-width: 1100px) {
  .peca { flex: 1 1 0; min-width: 0; }
}
.pecas__rodape {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.pecas__rodape .btn { justify-self: start; }
@media (min-width: 768px) {
  .pecas__rodape { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pecas__rodape .btn { justify-self: end; }
}
/* Texto meu, não da gráfica: marcado à parte (regra dos exemplos) */
.nota-exemplo {
  max-width: 60ch;
  padding: var(--space-5);
  border: 1px dashed var(--color-text-muted);
  border-radius: var(--radius-md);
}
.nota-exemplo__rotulo {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-verde);
}

/* Serviços: cada linha marcada pela mini lona da marca; retícula de impressão ao fundo, sumindo em diagonal */
.servicos { position: relative; isolation: isolate; overflow: clip; }
.servicos::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  z-index: -1;
  width: min(100%, 44rem);
  height: 36rem;
  background-image: radial-gradient(circle, var(--color-reticula) 2px, transparent 2.5px);
  background-size: 16px 16px;
  mask-image: linear-gradient(225deg, black 0%, transparent 65%);
}
.servicos__grade { display: grid; gap: var(--space-8); }
.servicos__titulo {
  max-width: 14ch;
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.servicos__sub { max-width: 30rem; margin-top: var(--space-3); font-size: var(--text-lg); }
/* Um botão só para o bloco inteiro, não um por serviço (design.md §8) */
.servicos__cta { margin-top: var(--space-6); }
.servicos__lista { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.servico {
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.servico__nome {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
}
.servico__texto p { margin-top: var(--space-1); line-height: 1.45; }
@media (min-width: 900px) {
  .servicos__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-16); align-items: start; }
  .servicos__cabeca { position: sticky; top: calc(5rem + var(--space-8)); }
  .servico { padding: var(--space-6); }
}

/* Contato: única superfície verde da página, para quebrar o escuro antes do fim */
.contato {
  --color-focus: var(--color-bg);
  background: var(--color-verde);
  color: var(--color-on-accent);
  -webkit-font-smoothing: auto; /* texto escuro sobre claro: o antialiased do base.css afina as letras */
}
.contato__grade { display: grid; gap: var(--space-8); }
.contato__titulo {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.contato__sub { max-width: 30rem; margin-top: var(--space-3); font-size: var(--text-lg); font-weight: 600; }
.contato__cta {
  margin-top: var(--space-6);
  background: var(--color-bg);
  color: var(--color-text);
}
.contato__cta:hover { background: var(--color-bg-alt); }
/* Ficha escura dentro do verde: as informações principais com contraste alto */
.contato__lista {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  list-style: none;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  -webkit-font-smoothing: antialiased;
}
.contato__lista li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}
.contato__lista li > svg { width: 1.5rem; height: 1.5rem; margin-top: 0.6rem; color: var(--color-verde); }
.contato__lista p { padding-block: 0.35rem; line-height: 1.4; }
.contato__lista strong { font-size: var(--text-lg); font-weight: 600; }
.contato__lista .link-icone { font-size: var(--text-lg); }
.contato__lista .link-icone:hover span { color: var(--color-verde); text-decoration: none; }
@media (min-width: 768px) {
  .contato__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-16); }
}

/* Títulos das seções: menores no celular para a página não pesar; tamanho cheio a partir do tablet largo */
@media (min-width: 900px) {
  .pecas__titulo, .servicos__titulo, .contato__titulo { font-size: var(--text-4xl); }
}

/* Janela "Este é um site de exemplo" */
.exemplo h2 { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; }
.exemplo__corpo { display: grid; justify-items: start; gap: var(--space-4); }
.exemplo__corpo svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Rodapé fecha como o topo abre: facetas escuras */
.site-footer { position: relative; isolation: isolate; overflow: clip; padding-block: var(--space-12) var(--space-8); background: var(--color-bg); color: var(--color-text); }
.rodape__facetas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.rodape__facetas .f1 { fill: var(--color-faceta-1); }
.rodape__facetas .f2 { fill: var(--color-faceta-2); }
.rodape__facetas .f3 { fill: var(--color-faceta-3); }
.rodape { display: grid; gap: var(--space-8); }
.rodape__marca .marca { font-size: var(--text-2xl); }
.rodape__marca p { margin-top: var(--space-2); color: var(--color-text-muted); }
.rodape__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.rodape__nav .link-icone:hover { color: var(--color-verde); }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.credito a { color: inherit; }
@media (min-width: 900px) {
  .rodape { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .rodape__base { grid-column: 1 / -1; }
}