/* JellyGlow — identidade visual do DTC (Fase 2).
   Carregado só por dtc/index.html, depois de styles.css: redefine os tokens e as cores fixas dos componentes,
   sem mudar estrutura, espaçamentos nem responsividade. UP/DWS seguem no tema base até a fase delas.
   Cores amostradas do rótulo oficial (img/JellyGlow/JellyGlow Label.png):
   creme #F9E8DB · rosado #F0C8C0 · dourado #C99D4B / #ECC97B / faixa #B88F3D · marrom #7E4E24 / #542E26 · tinta #201820.
   O rosa-framboesa dos CTAs deriva das gomas e mantém contraste AA com texto branco. */

/* Logotipo serifado dourado, como no rótulo — Playfair Display hospedada localmente (SIL OFL 1.1, ver fonts/OFL-PlayfairDisplay.txt) */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}

:root {
  --jg-cocoa-950: #1d100d;
  --jg-cocoa-900: #2c1814;
  --jg-cocoa-800: #42241d;
  --jg-cocoa-700: #5b3325;
  --jg-brown: #7e4e24; /* texto marrom do rótulo */
  --jg-gold: #c99d4b; /* logotipo e selo do rótulo */
  --jg-gold-300: #ecc97b;
  --jg-gold-700: #9c7430;
  --jg-gold-bar: #b88f3d; /* faixa dourada inferior do rótulo */
  --jg-cream: #fbefe6;
  --jg-cream-100: #f9e8db; /* fundo do rótulo */
  --jg-cream-50: #fdf7f2;
  --jg-blush: #f0c8c0; /* formas rosadas do rótulo */
  --jg-blush-300: #e7b0a3;
  --jg-blush-100: #f8e0d9;
  --jg-rose-500: #c64d67;
  --jg-rose: #c2485f;
  --jg-rose-700: #9d2f49;
  --jg-rose-800: #7f2239;
  --jg-ink: #2a1c1b;
  --jg-ink-soft: #5c4541;
  --jg-muted: #7f645b;
  --jg-line: #eed8cc;

  /* Tokens do template base, agora em JellyGlow */
  --np-green-950: var(--jg-cocoa-950);
  --np-green-900: var(--jg-cocoa-900);
  --np-green-800: var(--jg-cocoa-800);
  --np-green-700: var(--jg-cocoa-700);
  --np-green-600: var(--jg-brown);
  --np-mint: var(--jg-gold-300);
  --np-mint-300: var(--jg-blush-300);
  --np-mint-100: var(--jg-blush-100);
  --np-mint-50: var(--jg-cream-50);
  --np-red: var(--jg-rose);
  --np-red-700: var(--jg-rose-700);
  --np-red-800: var(--jg-rose-800);
  --np-maroon: var(--jg-cocoa-950);
  --np-gold: var(--jg-gold);
  --np-gold-300: var(--jg-gold-300);
  --np-gold-700: var(--jg-gold-700);
  --np-cream: var(--jg-cream);
  --np-cream-100: var(--jg-cream-100);
  --np-cream-50: var(--jg-cream-50);
  --np-ink: var(--jg-ink);
  --np-ink-soft: var(--jg-ink-soft);
  --np-muted: var(--jg-muted);
  --np-line: var(--jg-line);
  --np-shadow-sm: 0 1px 2px rgba(44, 24, 20, 0.06), 0 4px 14px -6px rgba(44, 24, 20, 0.14);
  --np-shadow-lg: 0 28px 56px -24px rgba(29, 16, 13, 0.45);
}

::selection {
  background: rgba(240, 200, 192, 0.75);
}

/* ---------------------------------------------------------------- header e logotipo */
.np-header {
  border-bottom: 1px solid rgba(201, 157, 75, 0.35);
}
.np-wordmark {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--jg-gold-300);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .np-wordmark {
    background: linear-gradient(180deg, #f3d792 0%, var(--jg-gold) 62%, var(--jg-gold-bar) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------------------------------------------------------------- fundos */
.np-highlight {
  color: var(--jg-rose-700);
}
.np-texture-light {
  background:
    radial-gradient(38% 55% at 92% 12%, rgba(240, 200, 192, 0.55), rgba(240, 200, 192, 0) 70%),
    radial-gradient(34% 48% at 4% 88%, rgba(201, 157, 75, 0.14), rgba(201, 157, 75, 0) 70%),
    radial-gradient(30% 40% at 62% 100%, rgba(240, 200, 192, 0.35), rgba(240, 200, 192, 0) 70%),
    var(--jg-cream-50);
}
.np-benefits-band {
  background:
    radial-gradient(45% 80% at 88% 25%, rgba(240, 200, 192, 0.16), rgba(240, 200, 192, 0) 70%),
    radial-gradient(40% 70% at 8% 95%, rgba(201, 157, 75, 0.18), rgba(201, 157, 75, 0) 70%),
    repeating-linear-gradient(135deg, rgba(251, 239, 230, 0.03) 0 2px, rgba(251, 239, 230, 0) 2px 16px),
    linear-gradient(135deg, var(--jg-cocoa-950), var(--jg-cocoa-800));
}
.np-dark-card {
  background:
    radial-gradient(70% 70% at 85% 20%, rgba(240, 200, 192, 0.14), rgba(240, 200, 192, 0) 65%),
    linear-gradient(170deg, var(--jg-cocoa-800) 0%, var(--jg-cocoa-900) 50%, var(--jg-cocoa-950) 100%);
}
/* "Nährwertinformationen" não cabe em 32px no celular: hifenização alemã + título um pouco menor em telas estreitas */
.np-dark-card__title {
  hyphens: auto;
}
@media (max-width: 480px) {
  .np-dark-card__title {
    font-size: 1.625rem;
  }
}

/* ---------------------------------------------------------------- CTA */
.np-cta.np-cta {
  border-color: var(--jg-rose-800);
  background-color: var(--jg-rose);
  background-image: linear-gradient(180deg, var(--jg-rose-500) 0%, var(--jg-rose-700) 100%);
  box-shadow: 0 10px 22px -12px rgba(127, 34, 57, 0.8);
}
.np-cta.np-cta:hover {
  background-image: linear-gradient(180deg, var(--jg-rose) 0%, var(--jg-rose-800) 100%);
}
.np-cta.np-cta.pending-action:disabled {
  background: var(--jg-cream-100);
  border: 1px dashed #e0c3b5;
}

/* ---------------------------------------------------------------- cards de oferta */
.np-offer {
  border-color: #140a08;
  background:
    radial-gradient(90% 40% at 50% 40%, rgba(240, 200, 192, 0.14), rgba(240, 200, 192, 0) 70%),
    linear-gradient(180deg, #160b09 0%, var(--jg-cocoa-900) 45%, var(--jg-cocoa-700) 100%);
}
.np-offer--featured {
  border-color: var(--jg-gold);
}
.np-offer .np-cta.np-cta.pending-action:disabled {
  border: 1px solid var(--jg-rose-800);
  background-color: var(--jg-rose);
  background-image: linear-gradient(180deg, var(--jg-rose-500) 0%, var(--jg-rose-700) 100%);
  box-shadow: 0 10px 22px -12px rgba(127, 34, 57, 0.8);
}

/* ---------------------------------------------------------------- espaços reservados das imagens (mockups alemães pendentes) */
.img-slot {
  border: 1.5px dashed rgba(201, 157, 75, 0.75);
  background:
    radial-gradient(75% 55% at 50% 38%, rgba(240, 200, 192, 0.6), rgba(240, 200, 192, 0) 72%),
    linear-gradient(180deg, var(--jg-cream-50), var(--jg-cream-100));
  color: var(--jg-brown);
}
.np-dark-card .img-slot,
.np-offer .img-slot {
  border-color: rgba(236, 201, 123, 0.45);
  background: rgba(251, 239, 230, 0.05);
  color: var(--jg-cream);
}

/* ---------------------------------------------------------------- rótulo, FAQ */
.np-label-link img {
  box-shadow: 0 10px 28px -16px rgba(44, 24, 20, 0.45);
}
.np-timeline::before {
  background: linear-gradient(180deg, var(--jg-gold), var(--jg-blush-300));
}
.np-timeline > li::before {
  background: var(--jg-rose);
}