/* =============================================================
   Sunomono — Ação itinerante
   Celular: a peça ocupa a largura inteira, sem moldura.
   Desktop: vira quadro — passe-partout branco, sombra leve e ar em volta.
   ============================================================= */

.sn-itin{
  --sn-itin-largura:560px;

  display:block;
  padding:clamp(40px,7vw,72px) 0;
  background:#fffaf3;

  /* o cabeçalho do site é fixo: sem esta folga o menu cobriria o topo
     da seção quando o link do menu rolar até aqui */
  scroll-margin-top:96px;
}

.sn-itin__moldura{
  margin:0 auto;
  line-height:0;         /* mata o vão que o inline deixa embaixo da imagem */
}

.sn-itin .sn-itin__img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}

/* -------------------------------------------------------------
   DESKTOP — a moldura
   ------------------------------------------------------------- */
@media (min-width:768px){
  .sn-itin{padding:clamp(64px,8vw,112px) 20px}

  .sn-itin__moldura{
    max-width:min(var(--sn-itin-largura),92vw);
    padding:14px;
    border-radius:18px;
    background:#fff;
    /* duas sombras: uma rente, que assenta o quadro, e outra larga e
       fraca, que dá a distância da parede */
    box-shadow:0 2px 6px rgba(60,30,20,.08),
               0 22px 48px rgba(60,30,20,.14);
  }

  .sn-itin .sn-itin__img{border-radius:9px}
}

@media (min-width:1200px){
  .sn-itin__moldura{padding:16px}
}