/* ═══════════════════════════════════════════════════════════════════
   LINHA GELADA — campanha de lançamento (Rassilan Gelato).
   BEM (.gelato__*), sem frameworks. Paleta do próprio logo da linha:
   rosa do gelato + marrom da tipografia, os mesmos tons do site.

   ⚠️ Isso aqui veste a CAMPANHA, não a identidade do site. O logo da
   Rassilan Padaria & Confeitaria segue mandando no header e no hero.

   Três colunas: chamada | assinatura da linha | data + contador.
   Estados (classe no .gelato, quem manda é o servidor):
     .gelato--teaser   → antes do dia: contagem regressiva
     .gelato--lancado  → já está na loja: botão leva pro cardápio

   Fontes esperadas na página: Playfair Display, Poppins, Caveat.
   ═══════════════════════════════════════════════════════════════════ */

.gelato {
  /* ── Paleta ─────────────────────────────────────── */
  --gl-rosa:        #E8879C;
  --gl-rosa-forte:  #D63F68;
  --gl-rosa-escuro: #B8305A;
  --gl-rosa-100:    #FFF7F8;
  --gl-rosa-200:    #FDECF0;
  --gl-rosa-300:    #F9DFE4;
  --gl-choco:       #3D1A0E;
  --gl-choco-soft:  #6B2E1A;
  --gl-muted:       #9B6B75;
  --gl-creme:       #FFFAF8;

  /* ── Base ───────────────────────────────────────── */
  --gl-radius:      30px;
  --gl-radius-sm:   14px;
  --gl-shadow:      0 22px 54px -24px rgba(184, 48, 90, .30);
  --gl-shadow-soft: 0 8px 22px -10px rgba(184, 48, 90, .20);
  --gl-ease:        cubic-bezier(.22, 1, .36, 1);
  --gl-display:     'Playfair Display', Georgia, serif;
  --gl-body:        'Poppins', system-ui, sans-serif;

  display: none;                 /* o servidor liga com .gelato--on */
  position: relative;
  overflow: hidden;
  padding: 30px 0 34px;
  background: linear-gradient(180deg, var(--gl-rosa-100) 0%, var(--gl-rosa-200) 100%);
  border-bottom: 1px solid #F0C4CE;
  font-family: var(--gl-body);
  color: var(--gl-choco);
  box-sizing: border-box;
}

.gelato--on { display: block; }
.gelato *, .gelato *::before, .gelato *::after { box-sizing: inherit; }

/* ── Granulado de fundo, bem discreto ── */
.gelato__sprinkles { position: absolute; inset: 0; pointer-events: none; opacity: .5; }

.gelato__sprinkle {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gl-rosa);
  opacity: .3;
}

.gelato__sprinkle:nth-child(1) { top: 14%; left:  4%; transform: scale(1.4); }
.gelato__sprinkle:nth-child(2) { top: 70%; left:  8%; background: var(--gl-choco); opacity: .1; }
.gelato__sprinkle:nth-child(3) { top: 22%; left: 94%; transform: scale(1.7); }
.gelato__sprinkle:nth-child(4) { top: 80%; left: 91%; background: var(--gl-rosa-forte); opacity: .2; }
.gelato__sprinkle:nth-child(5) { top:  7%; left: 52%; transform: scale(.8); }
.gelato__sprinkle:nth-child(6) { top: 90%; left: 44%; transform: scale(1.2); }

/* ── Painel da campanha ── */
.gelato__wrap {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

.gelato__campanha {
  position: relative;
  display: grid;
  /* duas colunas desde 28/08: a terceira era a data + contador, que saiu */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 26px;
  padding: 34px 40px;
  border: 1px solid #F6D9DF;
  border-radius: var(--gl-radius);
  background:
    radial-gradient(90% 120% at 50% 0%, #FFF3F6 0%, rgba(255,243,246,0) 60%),
    var(--gl-rosa-300);
  box-shadow: var(--gl-shadow);
}

/* ══════════ ESQUERDA — a chamada ══════════ */
.gelato__chamada { text-align: center; }

.gelato__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gl-choco);
}

.gelato__flag-risco {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--gl-rosa);
  opacity: .8;
}

.gelato__title {
  margin-top: 12px;
  font-family: var(--gl-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.14;
  color: var(--gl-choco);
}

.gelato__title em {
  display: block;
  font-style: normal;
  font-weight: 900;
  font-size: 1.24em;
  line-height: 1.02;
  color: var(--gl-rosa-forte);
}

/* [hidden] sozinho não segura: o display abaixo vence o padrão do navegador,
   e o botão aparecia mesmo sem sabor cadastrado — levando pra lista vazia */
.gelato__cta[hidden] { display: none; }

.gelato__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 30px;
  min-height: 48px;
  border: none;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--gl-rosa-forte), var(--gl-rosa-escuro));
  color: #fff;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(184, 48, 90, .7);
  transition: transform .25s var(--gl-ease), box-shadow .25s;
}

.gelato__cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 34px -12px rgba(184, 48, 90, .75);
}

.gelato__cta:active { transform: translateY(0) scale(.99); }

.gelato__cta svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ══════════ CENTRO — assinatura da linha ══════════ */
.gelato__marca {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* brilho rosado atrás do potinho */
.gelato__marca::before {
  content: '';
  position: absolute;
  width: 84%;
  padding-top: 84%;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF0F4 0%, rgba(255, 240, 244, 0) 68%);
}

.gelato__marca picture {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.gelato__logo {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 26px rgba(184, 48, 90, .16));
  animation: gelato-float 5.5s ease-in-out infinite;
}

@keyframes gelato-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ══════════ DIREITA — a data ══════════ */
.gelato__quando {
  padding: 26px 24px 24px;
  border: 1px solid #F6D9DF;
  border-radius: 22px;
  background: var(--gl-creme);
  box-shadow: var(--gl-shadow-soft);
  text-align: center;
}

.gelato__quando-tit {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gl-rosa-forte);
}

.gelato__quando-tit b { font-weight: 700; color: var(--gl-choco); }

/* "Em breve" com um risquinho de cada lado */
.gelato__quando-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-family: var(--gl-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gl-choco);
}

.gelato__quando-sep::before,
.gelato__quando-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #F0C4CE;
}

.gelato__quando-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--gl-display);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--gl-rosa-forte);
  font-variant-numeric: tabular-nums;
}

.gelato__quando-dia svg {
  width: 30px; height: 30px;
  flex: none;
  fill: none;
  stroke: var(--gl-rosa-forte);
  stroke-width: 1.8;
}

.gelato__countdown-label {
  margin-top: 18px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--gl-muted);
}

.gelato__countdown {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
}

.gelato__count {
  flex: 1;
  min-width: 0;
  padding: 10px 4px;
  border: 1px solid #F6D9DF;
  border-radius: var(--gl-radius-sm);
  background: linear-gradient(180deg, #fff, var(--gl-rosa-100));
  box-shadow: 0 4px 12px -6px rgba(184, 48, 90, .25);
}

.gelato__count b {
  display: block;
  font-family: var(--gl-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gl-rosa-forte);
  font-variant-numeric: tabular-nums;
}

.gelato__count span {
  display: block;
  margin-top: 4px;
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gl-muted);
}

.gelato__nota {
  margin-top: 16px;
  font-size: .74rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--gl-muted);
}

/* ══════════ Vitrine da linha ══════════
   Os produtos da Linha Gelada logo abaixo do pôster. Os cartões são os
   .card do cardápio (estilo mora no homepage.html) — aqui só entra a grade
   que os segura, estreita e centrada, pra dois ou três itens não esticarem
   feito seção de cardápio. Nasce [hidden] pelo HTML: sem produto na
   categoria, não existe caixa vazia embaixo da campanha. */
.gelato__vitrine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 520px;
  margin: 24px auto 0;
}

/* precisa vencer o display:grid acima — [hidden] sozinho não segura */
.gelato__vitrine[hidden] { display: none; }

/* ══════════ Tablet ══════════ */
@media (max-width: 1080px) {
  .gelato__campanha {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 30px 28px;
  }

  /* o cartão da data desce pra linha de baixo, ocupando a largura toda */
  .gelato__quando { grid-column: 1 / -1; }
  .gelato__logo   { max-width: 300px; }
}

/* ══════════ Celular ══════════ */
@media (max-width: 720px) {
  .gelato { padding: 20px 0 26px; }
  .gelato__wrap { padding: 0 14px; }
  .gelato__sprinkles { display: none; }

  .gelato__campanha {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 22px 18px 24px;
    border-radius: 24px;
  }

  /* no celular o potinho vem primeiro — é ele que para o dedo */
  .gelato__marca   { order: 1; }
  .gelato__chamada { order: 2; }
  .gelato__quando  { order: 3; margin-top: 18px; }

  .gelato__logo { max-width: 188px; animation: none; }
  .gelato__flag { font-size: .78rem; letter-spacing: 3px; gap: 10px; }
  .gelato__flag-risco { width: 18px; }
  .gelato__title { margin-top: 8px; }
  .gelato__cta   { width: 100%; justify-content: center; margin-top: 16px; }

  .gelato__quando { padding: 20px 18px; margin-top: 16px; }
  .gelato__quando-sep { margin-top: 12px; }
  .gelato__countdown-label { margin-top: 14px; }
  .gelato__nota { margin-top: 12px; font-size: .72rem; }
  .gelato__quando-dia { font-size: 2.1rem; }
  .gelato__quando-dia svg { width: 25px; height: 25px; }
  .gelato__count b { font-size: 1.25rem; }

  .gelato__vitrine { gap: 12px; margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .gelato__logo { animation: none; }
  .gelato__cta  { transition: none; }
}