* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FFFFFF;
  color: #000000;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6{
	font-weight: 400;
}

/* títulos/display em Archivo Black; texto corrido em Archivo normal */
.hero-title,
.section-title {
  font-family: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
}

/* efeito tipográfico condensado — aplicado uma única vez a todo elemento */
.hero-title,
.section-title{
  transform: scaleY(0.8);
  letter-spacing: -0.05em;
}

/* Menu superior (inspirado no #nav do style-bkp.css) */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 0.5rem clamp(2rem, 6vw, 6rem);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#nav a {
  color: rgba(0, 0, 0, 0.78);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.3rem 0.75rem;
  transition: color 0.18s;
}
#nav a:hover {
  color: #000000;
}

.section {
  /* height: 810px; */
  /* border-bottom:1px solid #000; */
  padding: 100px 0;
}

.container {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
}

/* Lado esquerdo: texto */
.text-col {
  flex: 1;
  /* padding-top: 175px; */
  padding-top: 50px;
}

.section-title {
  font-size: 2.4rem;
}

.section-text {
  font-size: 1.3rem;
  line-height: 1.4;
}

/* Seção 1 — hero (design de texto copiado do backup) */
/* fundo dividido: metade esquerda branca, metade direita laranja
   (o corte em 50% coincide com o centro do container de 1200px,
   exatamente na divisa entre a coluna de texto e a de imagem) */
#inicio {
  background: linear-gradient(to right, #FFFFFF 50%, #E1631D 50%);
}
#inicio .text-col {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.hero-sub {
  font-size: 1.3rem;
  color: rgba(0, 0, 0, 0.78);
  margin-bottom: 0.6rem;
}
.hero-title {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.1;
}
.hero-img {
  width: 489px;
  height: 513px;
  object-fit: contain;
}

/* Seção 2 — Participações */
.awards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 2rem;
}
.awards li {
  font-size: 1.3rem;
  line-height: 1.4;
}
.awards .yr {
  flex-shrink: 0;
  min-width: 6rem;
  margin-right: 20px;
}
.awards .yr::after {
  content: ':';
}
#participacoes .awards {
  gap: 0.42rem;
}
#participacoes .image-col{
	justify-content: flex-end;
	flex: 0 0 520px;
}
.participacoes-img {
  width: 520px;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Seção 3 — galeria luminárias */
#luminarias .section-text,
#mobiliario .section-text,
#marcador .section-text,
#colagens .section-text {
  margin-top: 1rem;
}

/* título: as 2 palavras centralizadas entre si, bloco à esquerda */
#objetos .section-title {
  display: inline-block;
  text-align: center;
  line-height: 0.95;
}
.obj-content {
  flex: 1;
  align-self: center;
}
.obj-row {
  display: flex;
  gap: 30px;
}
.obj-row img {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
  object-fit: cover;
  display: block;
}
.obj-desc {
  margin: 1.6rem 0;
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
}
.obj-desc:last-child {
  margin-bottom: 0;
}
/* descrição do material: levemente menor que a linha principal */
.obj-mat {
  font-size: 0.85em;
}


/* marcador — bloco de crédito abaixo do subtítulo, menor que a section-text */
.marc-credit {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
}

/* marcador do tempo presente: 5 imagens, 2 por linha (2+2+1) */
.marc-grid {
  display: grid;
  grid-template-columns: repeat(2, 210px);
  gap: 0.6rem;
}
.marc-grid img {
  width: 210px;
  height: 210px;
  object-fit: cover;
  display: block;
}

/* mobiliário: texto mais estreito, imagens maiores */
#mobiliario .container {
  gap: 60px;
}
#mobiliario .text-col {
  flex: 0 0 380px;
}
#mobiliario .image-col {
  flex: 1;
}
.mob-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}
.mob-main {
  width: 543px;
  height: auto;
  display: block;
}
.mob-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mob-row img {
  height: 130px;
  width: auto;
  object-fit: contain;
  display: block;
}
.mob-label {
  flex: 0 0 100%;
  text-align: center;
  font-size: 1.1rem;
  margin-top: 1.6rem;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  align-items: start;
}
.gallery img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  display: block;
}

/* Seções 8–9 — design gráfico e vídeos
   (fora do padrão de 2 colunas: título em cima, mídia em largura total) */
#grafico .container,
#videos .container {
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.sec-header .section-text {
  margin-top: 0.6rem;
}

/* design gráfico — grade de 9 por linha */
.graf-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  width: 100%;
}
.graf-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* vídeos — grade 16:9 */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 2vw, 1.8rem);
  width: 100%;
}
.vid-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vid-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.vid-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vid-label {
  font-size: 1.1rem;
  text-align: center;
}

/* colagens — texto à esquerda, imagens à direita (2 fileiras 3 + 4) */
#colagens .text-col {
  flex: 0 0 300px;
}
.col-imgs {
  flex: 1;
  align-self: center;
}
.col-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}
.col-row + .col-row {
  margin-top: 1.2rem;
}
.col-row img {
  flex: 0 0 auto;
  width: auto;
  height: 250px;
  object-fit: contain;
  display: block;
}
.col-row-top img:first-child {
  height: 220px;
}
.col-row-bot img:last-child {
  height: 290px;
}

/* Seção 10 — contato */
.contato-text {
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 1.5;
}
.contato-text p + p {
  margin-top: 0.4rem;
}
.contato-text a {
  color: inherit;
  text-decoration: none;
}
.contato-text a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lado direito: imagens */
.image-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box {
  background-color: rgba(0, 0, 0, 0.06);
}

/* Tamanhos diferentes por seção */
.image-box-1  { width: 400px; height: 500px; }
.image-box-2  { width: 350px; height: 350px; }
.image-box-3  { width: 500px; height: 300px; }
.image-box-4  { width: 300px; height: 600px; }
.image-box-5  { width: 450px; height: 450px; }
.image-box-6  { width: 380px; height: 520px; }
.image-box-7  { width: 550px; height: 350px; }
.image-box-8  { width: 320px; height: 420px; }
.image-box-9  { width: 480px; height: 480px; }
.image-box-10 { width: 360px; height: 600px; }

/* Reveal sutil e escalonado das imagens (paralax leve) — exceto hero */
@media (prefers-reduced-motion: no-preference) {
  .js .section:not(#inicio) img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .section:not(#inicio) img.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ======================================================
   CELULAR (≤ 1240px)
   ====================================================== */
@media (max-width: 1240px) {
  /* fontes menores no geral (o menu fica em px, sem encolher) */
  html { font-size: 14px; }

  /* menu superior: rolável horizontalmente com o dedo */
  #nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 16px;
  }

  /* empilhar tudo, largura fluida e altura automática */
  .container {
    width: 100%;
    flex-direction: column;
    gap: 1.8rem;
    padding: 0 20px;
  }
  .section {
    height: auto;
    padding: 44px 0 44px;
    scroll-margin-top: 56px;
  }
  /* seção inicial ocupa a altura da viewport */
  #inicio {
    height: 100svh;
    /* empilhado: some com o corte vertical, laranja vai atrás da imagem */
    background: #FFFFFF;
  }
  #inicio .container {
    justify-content: center;
  }
  #inicio .image-col {
    background: #E1631D;
    margin: 0 -20px;
    padding: 2rem 20px;
	width: calc(100% + 40px)
  }

  /* colunas de texto em largura total, sem o recuo de 175px */
  .text-col,
  #objetos .text-col,
  #mobiliario .text-col,
  #colagens .text-col {
    flex: 1 1 auto;
    width: 100%;
    padding-top: 0;
  }
  .image-col { width: 100%; }

  /* hero */
  .hero-img { width: 100%; max-width: 489px; height: auto; }
  .hero-title { font-size: 2.2rem; }
  .hero-sub { font-size: 1.2rem; }

  /* títulos e textos de seção */
  .section-title { font-size: 2rem; }
  .section-text,
  .obj-desc,
  .awards li,
  .contato-text { font-size: 1.1rem; }

  /* participações */
  .participacoes-img { width: 100%; max-width: 546px; height: auto; }

  /* mobiliário */
  #mobiliario .container { gap: 1.8rem; }
  .mob-main { width: 100%; max-width: 543px; }
  .mob-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mob-row img { width: 100%; height: auto; }
  .mob-label { grid-column: 1 / -1; }

  /* objetos oníricos: 2 imagens por linha, a 3ª cai para a linha de baixo */
  .obj-content { align-self: auto; width: 100%; }
  .obj-row { flex-wrap: wrap; justify-content: center; }
  .obj-row img {
    flex: 0 0 calc(50% - 15px);
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
  }

  /* marcador */
  .marc-grid { grid-template-columns: repeat(2, 1fr); }
  .marc-grid img { width: 100%; height: auto; aspect-ratio: 1; }

  /* colagens: um único grid de 2 colunas (2, 2, 2, 1), unindo as duas fileiras */
  .col-imgs {
    align-self: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .col-row,
  .col-row-top,
  .col-row-bot {
    display: contents;
  }
  .col-row img,
  .col-row-top img:first-child,
  .col-row-bot img:last-child {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* design gráfico */
  .graf-grid { grid-template-columns: repeat(4, 1fr); }

  /* galeria de luminárias */
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery img { height: 150px; }

  /* vídeos */
  .vid-grid { grid-template-columns: 1fr; }
}