/* ==========================================================================
   NUVEM DO SONO — ficha de produto (produto/<id>.html)
   Depende de styles.css e catalogo.css (preço, maciez e galeria vêm de lá).
   ========================================================================== */

/* ---------------------------------------------------------------- trilha */
.trilha {
  padding-top: 104px;
  padding-bottom: var(--s-5);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--texto-suave);
}
.trilha a { color: var(--texto-suave); transition: color .3s var(--ease); }
.trilha a:hover { color: var(--turquesa); }
.trilha span { color: var(--grafite); }

/* ------------------------------------------------------------------ topo */
.pp { padding-bottom: clamp(56px, 6vw, 96px); }
.pp__grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}

.pp__info .h2 { margin-top: var(--s-3); }
.pp__tag {
  margin-top: var(--s-4);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--turquesa);
  max-width: 44ch;
}
.pp .preco { margin-top: var(--s-6); }

.pp__acoes { margin-top: var(--s-6); display: grid; gap: var(--s-3); }

.pp__meta {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--linha);
  display: grid;
  gap: var(--s-4);
}
.pp__meta li { font-size: 13.5px; line-height: 1.6; color: var(--texto-suave); }
.pp__meta strong {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turquesa);
  margin-bottom: 3px;
}

/* --------------------------------------------------------------- blocos */
/* quando .bloco divide o elemento com .container, o max-width centralizava a
   coluna e ela saía do alinhamento da capa. O container mantém a largura e a
   medida de leitura passa a valer para cada filho. */
.bloco { max-width: 78ch; }
.container.bloco { max-width: var(--container); }
.container.bloco > :not(.tabela):not(.bairros) { max-width: 78ch; }
.bloco__h {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.2;
  color: var(--grafite);
}
.bloco__texto p {
  margin-top: var(--s-5);
  font-size: 16px;
  line-height: 1.78;
  color: var(--texto-suave);
}
.bloco__ficha {
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: var(--branco-nuvem);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  font-size: 14px;
  line-height: 1.8;
  color: var(--texto-suave);
}
.section--neve .bloco__h + .bloco__texto p:first-child { margin-top: var(--s-5); }
.bloco .bloco__h + .bloco__ficha,
.bloco__texto + .bloco__h { margin-top: var(--s-7); }
.bloco__nota {
  margin-top: var(--s-5);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--texto-suave);
}

/* -------------------------------------------------------------- tabela */
.tabela {
  width: 100%;
  margin-top: var(--s-5);
  border-collapse: collapse;
  font-size: 14.5px;
}
.tabela th, .tabela td {
  text-align: left;
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--texto-suave);
  font-weight: 400;
}
.tabela thead th {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--turquesa);
  border-bottom-color: var(--linha-forte);
}
.tabela tbody th { color: var(--grafite); font-weight: 500; }

/* --------------------------------------------------------- relacionados */
.rels {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.rel {
  display: block;
  background: var(--branco-nuvem);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.rel:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: transparent; }
.rel__media { aspect-ratio: 1 / 1; background: #FFFFFF; }
.rel__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-4); }
.rel h3 {
  padding: var(--s-4) var(--s-4) 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.25;
  color: var(--grafite);
}
.rel p {
  padding: 8px var(--s-4) var(--s-5);
  font-size: 12.5px;
  color: var(--texto-suave);
}
.rel p strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--grafite);
}

/* ---------------------------------------------------------- responsivo */
@media (max-width: 1080px) {
  .pp__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .rels { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .trilha { padding-top: 96px; font-size: 12px; }
  .bloco__texto p { font-size: 15.5px; }
  .tabela { font-size: 13px; }
  .tabela th, .tabela td { padding: 11px 10px 11px 0; }
}

@media (max-width: 420px) {
  .rels { grid-template-columns: 1fr; }
}