/* =============================================================
   Sunomono — Calendário de agosto (10 anos)
   Mobile first. Cores tiradas dos selos da campanha.
   ============================================================= */

/* As variáveis precisam existir NOS DOIS: o modal é anexado ao <body>, fora da
   seção. Sem isto, todo `font: ... var(--cal-fonte)` dentro do modal vira
   declaração inválida e o navegador descarta a regra INTEIRA — inclusive o
   tamanho e o peso, não só a família. */
.sn-cal,
.sn-cal-modal,
.sn-legal{
  --cal-vinho:#8b2c36;
  --cal-vinho-fundo:#7a2630;
  --cal-vinho-claro:#a34551;
  --cal-creme:#dfcba3;
  --cal-creme-claro:#efe3cb;
  --cal-papel:#fffaf3;
  --cal-tinta:#241f1f;
  --cal-tinta-fraca:#6b625d;
  --cal-fonte:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

.sn-cal{
  position:relative;
  display:block;
  padding:clamp(52px,9vw,104px) 20px;
  background:var(--cal-papel);
  color:var(--cal-tinta);
  font-family:var(--cal-fonte);
  overflow:hidden;
}

.sn-cal *,
.sn-cal *::before,
.sn-cal *::after{box-sizing:border-box}

.sn-cal__interno{max-width:1180px;margin:0 auto}

/* -------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------- */
.sn-cal__cabecalho{
  text-align:center;
  max-width:640px;
  margin:0 auto clamp(34px,5vw,58px);
}
.sn-cal__olho{
  margin:0 0 12px;
  font:700 12px/1 var(--cal-fonte);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cal-vinho);
}
.sn-cal__titulo{
  margin:0 0 14px;
  font:700 clamp(28px,4.6vw,44px)/1.12 var(--cal-fonte);
  letter-spacing:-.01em;
}
.sn-cal__subtitulo{
  margin:0;
  font:400 15px/1.66 var(--cal-fonte);
  color:var(--cal-tinta-fraca);
}

/* -------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------- */
/* minmax(0,1fr) e não 1fr: uma trilha "1fr" tem mínimo implícito de min-content
   e se recusa a encolher abaixo do conteúdo, empurrando o container para fora
   da tela. Como a seção tem overflow:hidden, o excesso é CORTADO em vez de
   virar rolagem — some meia coluna sem aviso. */
.sn-cal__corpo{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,44px);
}

/* -------------------------------------------------------------
   GRADE DO MÊS
   ------------------------------------------------------------- */
.sn-cal__grade-bloco{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(139,44,54,.12);
  border-radius:22px;
  padding:clamp(18px,3vw,30px);
  box-shadow:0 18px 44px rgba(60,30,20,.07);
}

.sn-cal__mes{
  margin:0 0 18px;
  font:700 17px/1 var(--cal-fonte);
  letter-spacing:.01em;
}

.sn-cal__semana,
.sn-cal__grade{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  min-width:0;
}
.sn-cal__semana{margin-bottom:8px}
.sn-cal__semana span{
  text-align:center;
  font:700 10px/1 var(--cal-fonte);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cal-tinta-fraca);
  padding-bottom:4px;
}

.sn-cal__vazio{display:block}

/* dia comum */
.sn-cal__dia{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  aspect-ratio:1;
  border:0;
  border-radius:12px;
  background:#faf5ec;
  color:var(--cal-tinta-fraca);
  font-family:var(--cal-fonte);
  padding:2px;
}
.sn-cal__dia.is-fimdesemana{background:#f5eee2}
.sn-cal__numero{font:600 14px/1 var(--cal-fonte)}

/* dia com promoção — vira um selinho */
.sn-cal__dia--evento{
  cursor:pointer;
  background:var(--cal-vinho);
  color:var(--cal-creme);
  box-shadow:0 6px 16px rgba(139,44,54,.28);
  /* o "picote" do selo, desenhado com o próprio contorno */
  outline:2px dashed rgba(223,203,163,.55);
  outline-offset:-6px;
  transition:transform .32s cubic-bezier(.2,.8,.3,1),
             box-shadow .32s ease,
             background-color .32s ease;
  -webkit-tap-highlight-color:transparent;
}
.sn-cal__dia--evento .sn-cal__numero{
  font-weight:700;
  font-size:clamp(15px,2.1vw,19px);
  color:#fff;
}
/* o texto da promoção saiu da célula: sobrou número + ícone do canal */
.sn-cal__aster{
  font-size:.55em;
  vertical-align:super;
  color:var(--cal-creme);
  margin-left:1px;
}

.sn-cal__canal{
  display:block;
  width:clamp(13px,2.4vw,17px);
  color:var(--cal-creme);
  opacity:.92;
  line-height:0;
}
/* o logotipo do iFood é deitado (quase 2:1) — num quadrado de 15px viraria
   um borrão, então ganha mais largura que o ícone do app.
   Em branco pleno: o vermelho original sobre o vinho da célula some. */
.sn-cal__canal--ifood{
  width:clamp(26px,4.6vw,34px);
  color:#fff;
  opacity:1;
}
.sn-cal__canal svg,
.sn-cal__canal img{
  display:block;
  width:100%;
  height:auto;
}

.sn-cal__dia--evento:hover,
.sn-cal__dia--evento:focus-visible{
  transform:translateY(-4px) scale(1.09) rotate(-1.4deg);
  background:var(--cal-vinho-claro);
  box-shadow:0 16px 30px rgba(139,44,54,.36);
  z-index:2;
}
.sn-cal__dia--evento:focus-visible{outline:3px solid var(--cal-vinho);outline-offset:3px}
.sn-cal__dia--evento:active{transform:translateY(-1px) scale(1.02)}

.sn-cal__legenda{
  display:flex;align-items:center;gap:8px;
  margin:18px 0 0;
  font:600 12px/1 var(--cal-fonte);
  color:var(--cal-tinta-fraca);
}
.sn-cal__ponto{
  width:12px;height:12px;border-radius:4px;
  background:var(--cal-vinho);
  outline:1px dashed rgba(223,203,163,.7);
  outline-offset:-3px;
}

/* -------------------------------------------------------------
   AGENDA (lista)
   ------------------------------------------------------------- */
.sn-cal__agenda{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.sn-cal__agenda li{min-width:0}

.sn-cal__item{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  text-align:left;
  padding:14px 16px;
  border:1px solid rgba(139,44,54,.14);
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  font-family:var(--cal-fonte);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),
             box-shadow .3s ease,
             border-color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.sn-cal__item:hover,
.sn-cal__item:focus-visible{
  transform:translateX(5px);
  border-color:var(--cal-vinho);
  box-shadow:0 12px 26px rgba(139,44,54,.14);
}
.sn-cal__item:focus-visible{outline:3px solid var(--cal-vinho);outline-offset:2px}

.sn-cal__item-data{
  flex:0 0 auto;
  width:54px;height:54px;
  border-radius:13px;
  background:var(--cal-vinho);
  color:var(--cal-creme);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  line-height:1;
}
.sn-cal__item-data strong{font:700 20px/1 var(--cal-fonte);color:#fff}
.sn-cal__item-data small{font:700 9px/1 var(--cal-fonte);letter-spacing:.1em;margin-top:3px}

.sn-cal__item-texto{flex:1 1 auto;min-width:0}
.sn-cal__item-etiqueta{
  display:block;
  font:700 10px/1 var(--cal-fonte);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--cal-vinho);
  margin-bottom:5px;
}
.sn-cal__item-titulo{
  display:block;
  font:600 15px/1.35 var(--cal-fonte);
  color:var(--cal-tinta);
}

.sn-cal__item-seta{
  flex:0 0 auto;
  color:var(--cal-vinho);
  opacity:.45;
  transition:opacity .3s ease,transform .3s ease;
}
.sn-cal__item-seta svg{display:block;width:20px;height:20px}
.sn-cal__item:hover .sn-cal__item-seta{opacity:1;transform:translateX(3px)}

/* -------------------------------------------------------------
   MODAL
   ------------------------------------------------------------- */
.sn-cal-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family:var(--cal-fonte,"Montserrat",system-ui,sans-serif);
}
.sn-cal-modal[hidden]{display:none}

.sn-cal-modal__fundo{
  position:absolute;inset:0;
  background:rgba(36,20,22,.62);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity .3s ease;
}
.sn-cal-modal.is-aberto .sn-cal-modal__fundo{opacity:1}

.sn-cal-modal__painel{
  position:relative;
  width:min(940px,100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:#fffaf3;
  border-radius:22px;
  box-shadow:0 40px 90px rgba(0,0,0,.34);
  opacity:0;
  transform:translateY(22px) scale(.97);
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.3,1);
}
.sn-cal-modal.is-aberto .sn-cal-modal__painel{opacity:1;transform:none}

.sn-cal-modal__fechar{
  position:absolute;top:14px;right:14px;
  width:42px;height:42px;border-radius:50%;
  border:0;
  background:rgba(255,255,255,.9);
  color:#8b2c36;
  display:grid;place-items:center;
  cursor:pointer;
  z-index:3;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  transition:transform .2s ease,background-color .2s ease;
}
.sn-cal-modal__fechar:hover{transform:rotate(90deg);background:#fff}
.sn-cal-modal__fechar svg{display:block;width:20px;height:20px}

.sn-cal-modal__grade{display:grid}

/* lado da arte */
.sn-cal-modal__arte{
  display:flex;align-items:center;justify-content:center;
  padding:28px 24px;
  background:linear-gradient(160deg,#f3e7d2 0%,#e6d3b4 100%);
  min-height:220px;
}
.sn-cal-modal__arte img{
  display:block;
  width:100%;max-width:340px;height:auto;
  filter:drop-shadow(0 16px 30px rgba(80,40,30,.24));
}

/* selo provisório, quando ainda não existe a arte */
.sn-cal-selo{
  width:100%;max-width:320px;
  background:#fff;
  border-radius:6px;
  padding:26px 22px;
  text-align:center;
  box-shadow:0 16px 34px rgba(80,40,30,.22);
  outline:3px dashed rgba(139,44,54,.28);
  outline-offset:-12px;
}
.sn-cal-selo__data{
  font:700 40px/1 var(--cal-fonte);
  color:#8b2c36;
  letter-spacing:-.02em;
}
.sn-cal-selo__risco{
  height:2px;margin:14px 0;
  background:linear-gradient(90deg,transparent,#8b2c36,transparent);
}
.sn-cal-selo__chamada{
  font:600 13px/1.4 var(--cal-fonte);
  color:#8b2c36;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.sn-cal-selo__faixa{
  margin:18px -22px -26px;
  padding:22px 18px 26px;
  background:#8b2c36;
  color:#dfcba3;
  font:700 30px/1.05 var(--cal-fonte);
}
.sn-cal-selo__aviso{
  display:block;margin-top:10px;
  font:600 9px/1.3 var(--cal-fonte);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(223,203,163,.65);
}

/* lado do texto */
.sn-cal-modal__texto{
  padding:30px 26px 34px;
}
.sn-cal-modal__data{
  display:inline-block;
  margin:0 0 14px;
  padding:7px 14px;
  border-radius:999px;
  background:#8b2c36;
  color:#fff;
  font:700 11px/1 var(--cal-fonte);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sn-cal-modal__chamada{
  margin:0 0 8px;
  font:700 11px/1 var(--cal-fonte);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#a34551;
}
.sn-cal-modal__titulo{
  margin:0 0 14px;
  font:700 clamp(22px,3.2vw,30px)/1.18 var(--cal-fonte);
  color:#241f1f;
}
.sn-cal-modal__descricao{
  margin:0 0 26px;
  font:400 15px/1.72 var(--cal-fonte);
  color:#5c534e;
}
.sn-cal-modal__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;
  border-radius:999px;
  background:#8b2c36;
  color:#fff;
  font:700 14px/1 var(--cal-fonte);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,background-color .25s ease;
  box-shadow:0 10px 24px rgba(139,44,54,.3);
}
.sn-cal-modal__cta:hover{
  background:#a34551;
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(139,44,54,.38);
  color:#fff;
}
.sn-cal-modal__cta svg{width:18px;height:18px}

/* -------------------------------------------------------------
   TABLET
   ------------------------------------------------------------- */
@media (min-width:600px){
  .sn-cal button.sn-cal__item{padding:16px 20px}
  .sn-cal__grade,
  .sn-cal__semana{gap:8px}
  .sn-cal__dia{border-radius:14px}
  .sn-cal__numero{font-size:15px}
  .sn-cal__item{padding:16px 20px;gap:18px}
  .sn-cal__item-titulo{font-size:16px}

  .sn-cal-modal__grade{grid-template-columns:minmax(0,44%) minmax(0,56%)}
  .sn-cal-modal__arte{padding:36px 30px}
  .sn-cal-modal__texto{padding:44px 42px 46px;align-self:center}
}

/* -------------------------------------------------------------
   DESKTOP — grade e agenda lado a lado
   ------------------------------------------------------------- */
@media (min-width:980px){
  .sn-cal__corpo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
  .sn-cal__grade,
  .sn-cal__semana{gap:10px}
}

/* -------------------------------------------------------------
   ASTERISCOS E CONDIÇÕES
   O asterisco marca cada promoção; as condições aparecem uma vez
   no rodapé da seção (e no rodapé do site, via [sunomono_legal]).
   ------------------------------------------------------------- */
.sn-cal__notas{
  margin:clamp(26px,4vw,40px) 0 0;
  text-align:center;
  font:400 10px/1.65 var(--cal-fonte);
  color:#9a9089;
}

.sn-cal-modal__aster{
  font-size:.6em;
  vertical-align:super;
  color:var(--cal-vinho-claro);
  margin-left:2px;
}
.sn-cal-modal__notas{
  margin:20px 0 0;
  font:400 10px/1.6 var(--cal-fonte);
  color:#9a9089;
}

/* período de vários dias: "14–16" precisa de menos corpo que "14" */
.sn-cal__item-data.is-periodo strong{font-size:15px;letter-spacing:-.02em}

/* letra miúda para o rodapé do site */
.sn-legal{
  font-family:var(--cal-fonte,"Montserrat",system-ui,sans-serif);
  color:#8c817a;
  padding:14px 16px;
}
.sn-legal p{
  margin:0 0 3px;
  font-size:10px;
  line-height:1.65;
}
.sn-legal p:last-child{margin-bottom:0}
.sn-legal--centro{text-align:center}
.sn-legal--direita{text-align:right}
.sn-legal--esquerda{text-align:left}

/* =============================================================
   BLINDAGEM CONTRA O TEMA

   O tema declara algo como `button:hover { background: ... }`, que tem
   especificidade (0,1,1) — maior que uma classe sozinha (0,1,0). Resultado:
   nossos botões ganhavam um fundo rosa no hover.

   A saída é redeclarar o fundo de cada componente em TODOS os estados, com
   o seletor ancestral na frente para subir a especificidade para (0,2,x).
   Sem !important: se um dia for preciso sobrescrever, ainda dá.

   Este bloco fica por último de propósito. Ao criar um botão novo no
   calendário, acrescente-o aqui também.
   ============================================================= */

/* O reset do tema aplica em [type=button] — mesma especificidade das nossas
   classes. Empate: quem carrega depois vence, e o tema carrega depois. Ele traz
   padding:.5rem 1rem, border:1px solid, border-radius:3px e font-size:1rem, o
   que amassa qualquer botão nosso. Aqui zeramos tudo com (0,2,0). */
.sn-cal button.sn-cal__dia--evento,
.sn-cal button.sn-cal__item,
.sn-cal-modal button.sn-cal-modal__fechar{
  padding:0;
  border:0;
  font-size:inherit;
  line-height:inherit;
  white-space:normal;
  text-align:inherit;
}
/* e devolvemos o que cada um precisa de fato.
   Atenção: NÃO zere `width` no bloco acima — o botão fechar tem 42x42 fixos e
   viraria um oval (largura do ícone, altura cheia). */
.sn-cal button.sn-cal__item{padding:14px 16px;width:100%}
.sn-cal button.sn-cal__dia--evento{padding:2px;width:auto}
.sn-cal-modal button.sn-cal-modal__fechar{width:42px;height:42px}

/* dia com promoção */
.sn-cal .sn-cal__dia--evento,
.sn-cal .sn-cal__dia--evento:focus,
.sn-cal .sn-cal__dia--evento:active{background-color:var(--cal-vinho);color:var(--cal-creme)}
.sn-cal .sn-cal__dia--evento:hover,
.sn-cal .sn-cal__dia--evento:focus-visible{background-color:var(--cal-vinho-claro);color:var(--cal-creme)}

/* item da agenda */
.sn-cal .sn-cal__item,
.sn-cal .sn-cal__item:hover,
.sn-cal .sn-cal__item:focus,
.sn-cal .sn-cal__item:active{background-color:#fff;color:var(--cal-tinta)}

/* Botão fechar do modal. O `color` é essencial: o X é desenhado com
   currentColor e o modal dá foco neste botão ao abrir — sem fixar a cor,
   o reset do tema pinta tudo de branco e o ícone some no fundo claro. */
.sn-cal-modal .sn-cal-modal__fechar,
.sn-cal-modal .sn-cal-modal__fechar:focus,
.sn-cal-modal .sn-cal-modal__fechar:active{
  background-color:#fff;
  color:var(--cal-vinho);
  /* o painel é creme: um círculo branco puro quase some. O aro fecha a forma. */
  box-shadow:0 4px 14px rgba(0,0,0,.14), inset 0 0 0 1px rgba(139,44,54,.16);
}
.sn-cal-modal .sn-cal-modal__fechar:hover{
  background-color:#fff;
  color:var(--cal-vinho);
  box-shadow:0 6px 18px rgba(0,0,0,.2), inset 0 0 0 1px rgba(139,44,54,.3);
}

/* CTA do modal — é um <a>, e temas também pintam a:hover */
.sn-cal-modal .sn-cal-modal__cta,
.sn-cal-modal .sn-cal-modal__cta:focus,
.sn-cal-modal .sn-cal-modal__cta:active{background-color:var(--cal-vinho);color:#fff}
.sn-cal-modal .sn-cal-modal__cta:hover{background-color:var(--cal-vinho-claro);color:#fff}

/* -------------------------------------------------------------
   Menos animação para quem pediu
   ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sn-cal__dia--evento,
  .sn-cal__item,
  .sn-cal__item-seta,
  .sn-cal-modal__painel,
  .sn-cal-modal__fundo,
  .sn-cal-modal__cta,
  .sn-cal-modal__fechar{transition:none}
  .sn-cal__dia--evento:hover{transform:scale(1.03)}
  .sn-cal-modal__painel{transform:none}
}