/* ==========================================================================
   NUVEM DO SONO — páginas institucionais
   empresa · dicas e cuidados · loja · entrega · contato
   Depende de styles.css e catalogo.css.
   ========================================================================== */

/* ------------------------------------------------------------------- capa */
.capa {
  padding-top: var(--s-7);
  padding-bottom: clamp(48px, 5vw, 86px);
  position: relative;
  overflow: hidden;
}
.capa::before {
  content: '';
  position: absolute;
  top: -240px; right: -200px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(115, 198, 231, 0.17) 0%, rgba(115, 198, 231, 0) 68%);
  pointer-events: none;
}
.capa > .container { position: relative; }
.capa .h1 { margin-top: var(--s-5); max-width: 18ch; }
.capa .lead { margin-top: var(--s-5); max-width: 62ch; }

/* ----------------------------------------------------------------- pilares */
.pilares {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.pilar {
  padding-top: var(--s-5);
  border-top: 1px solid var(--linha-forte);
}
.pilar__n {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--dourado);
}
.pilar h3 {
  margin-top: var(--s-4);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: var(--grafite);
}
.pilar p {
  margin-top: var(--s-3);
  font-size: 14px;
  line-height: 1.65;
  color: var(--texto-suave);
}

/* ------------------------------------------------------- lista de dados */
.dados {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
  max-width: 62ch;
}
.dados li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--linha);
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.dados strong {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turquesa);
  padding-top: 4px;
}

/* ------------------------------------------------------------- bairros */
.bairros {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.bairros li {
  padding: 8px 15px;
  background: var(--branco-nuvem);
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--grafite);
}

/* --------------------------------------------------------- escala de 5 */
.escala {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
  counter-reset: passo;
}
.escala li {
  padding: var(--s-5) var(--s-4);
  background: var(--branco-nuvem);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  text-align: center;
}
.escala li:nth-child(1) { border-color: rgba(115,198,231,.55); }
.escala li:nth-child(5) { border-color: rgba(43,123,153,.45); }
.escala__n {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--dourado);
  line-height: 1;
}
.escala strong {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.25;
  color: var(--grafite);
}

/* ---------------------------------------------------------------- mapa */
.mapa {
  margin-top: var(--s-7);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--linha);
  box-shadow: var(--sh-2);
  line-height: 0;
  background: var(--branco-nuvem);
}
.mapa iframe { display: block; width: 100%; }

/* -------------------------------------------------------------- canais */
.canais {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.canal {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--branco-nuvem);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.canal:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: transparent; }
.canal--wa { border-color: rgba(31, 168, 85, .35); }
.canal__olho {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turquesa);
}
.canal--wa .canal__olho { color: #1FA855; }
.canal strong {
  margin-top: var(--s-3);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  color: var(--grafite);
}
.canal__valor {
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--turquesa);
}
.canal__texto {
  margin-top: var(--s-4);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* ------------------------------------------------------- faixa de CTA */
.faixa-cta { text-align: center; }
.faixa-cta .h2 { max-width: 22ch; margin-inline: auto; }
.faixa-cta .lead { max-width: 56ch; margin-inline: auto; margin-top: var(--s-5); }

/* ------------------------------------------------------- responsivo */
@media (max-width: 1080px) {
  .pilares { grid-template-columns: 1fr 1fr; }
  .canais { grid-template-columns: 1fr 1fr; }
  .escala { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .capa .h1 { max-width: none; }
  .pilares, .canais { grid-template-columns: 1fr; }
  .escala { grid-template-columns: 1fr 1fr; }
  .dados li { grid-template-columns: 1fr; gap: 4px; }
  .mapa iframe { height: 320px; }
}