/* DONUTRI | Banner de primeira compra (vitrine e loja) */
.dnl-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(21, 13, 9, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s .35s; }
.dnl-scrim.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s; }
.dnl {
  position: fixed; z-index: 301; left: 50%; top: 50%; width: min(860px, calc(100% - 32px));
  display: grid; grid-template-columns: .95fr 1.05fr; overflow: hidden; border-radius: 28px;
  background: #fffaf2; color: #2a1c17; box-shadow: 0 40px 100px rgba(21, 13, 9, .35);
  font-family: "Manrope", system-ui, sans-serif; transform: translate(-50%, -46%) scale(.97); opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s, visibility 0s .35s;
}
.dnl.on { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.dnl-media { position: relative; min-height: 460px; background: #211510; }
.dnl-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dnl-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(21, 13, 9, .78)); }
.dnl-stamp {
  position: absolute; z-index: 2; left: 22px; top: 22px; width: 112px; height: 112px; display: grid; place-content: center; text-align: center;
  border-radius: 50%; background: linear-gradient(135deg, #cf9c48, #b7822d 55%, #94661d); color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  transform: rotate(-8deg);
}
.dnl-stamp b { display: block; font: 600 2.4rem/1 "Fraunces", Georgia, serif; letter-spacing: -.04em; }
.dnl-stamp span { font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.dnl-cap { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; color: #fffaf2; }
.dnl-cap small { display: block; color: #ddb56b; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.dnl-cap strong { display: block; margin-top: 4px; font: 500 1.35rem/1.15 "Fraunces", Georgia, serif; }
.dnl-body { position: relative; padding: 40px 36px 30px; display: flex; flex-direction: column; justify-content: center; }
.dnl-x { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1e8da; color: #2a1c17; display: grid; place-items: center; cursor: pointer; }
.dnl-x svg { width: 16px; height: 16px; }
.dnl-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #94661d; font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.dnl-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.dnl h2 { margin: 0; font: 500 clamp(1.9rem, 3.4vw, 2.6rem)/1 "Fraunces", Georgia, serif; letter-spacing: -.035em; }
.dnl h2 em { font-style: italic; font-weight: 400; color: #94661d; }
.dnl p { margin: 12px 0 0; color: #6f594f; font-size: .92rem; line-height: 1.5; }
.dnl form { display: grid; gap: 10px; margin-top: 20px; }
.dnl input[type=text], .dnl input[type=tel] {
  width: 100%; height: 52px; padding: 0 16px; border: 1px solid rgba(75, 46, 37, .24); border-radius: 14px; background: #fff;
  font: 500 16px "Manrope", system-ui, sans-serif; color: #2a1c17;
}
.dnl input:focus { outline: none; border-color: #b7822d; box-shadow: 0 0 0 4px rgba(183, 130, 45, .15); }
.dnl-btn {
  min-height: 54px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #cf9c48, #b7822d 55%, #94661d); color: #fff;
  font: 800 .92rem "Manrope", system-ui, sans-serif; letter-spacing: .01em; cursor: pointer; box-shadow: 0 12px 28px rgba(183, 130, 45, .32);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 0 22px;
}
.dnl-btn.dark { background: #211510; box-shadow: none; }
.dnl-btn.ghost { background: transparent; color: #2a1c17; border: 1px solid rgba(75, 46, 37, .24); box-shadow: none; }
.dnl-btn:disabled { opacity: .55; cursor: wait; }
.dnl-legal { margin-top: 10px !important; font-size: .72rem !important; color: #8b766b !important; }
.dnl-legal a { color: inherit; }
.dnl-err { color: #a33a2c; font-size: .8rem; font-weight: 700; min-height: 1em; }
.dnl-skip { margin-top: 6px; border: 0; background: none; color: #8b766b; font: 700 .78rem "Manrope", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dnl-code {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 14px 14px 20px;
  border: 1.5px dashed #b7822d; border-radius: 16px; background: #fff;
}
.dnl-code b { font: 600 1.5rem/1 "Fraunces", Georgia, serif; letter-spacing: .06em; }
.dnl-code button { border: 0; border-radius: 999px; padding: 10px 14px; background: #f1e8da; font: 800 .74rem "Manrope", sans-serif; cursor: pointer; color: #2a1c17; }
.dnl-acts { display: grid; gap: 8px; margin-top: 18px; }
.dnl-pill {
  position: fixed; z-index: 250; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px;
  border: 0; border-radius: 999px; background: #211510; color: #fffaf2; box-shadow: 0 16px 40px rgba(21, 13, 9, .3);
  font: 700 .8rem "Manrope", system-ui, sans-serif; cursor: pointer; transform: translateY(160%); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.dnl-pill.on { transform: none; }
.dnl-pill i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #b7822d; font-style: normal; font-weight: 800; font-size: .72rem; }
@media (max-width: 760px) {
  .dnl {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; grid-template-columns: 1fr; border-radius: 26px 26px 0 0;
    transform: translateY(100%); max-height: 94dvh; overflow-y: auto;
  }
  .dnl.on { transform: none; }
  .dnl-media { min-height: 0; height: 190px; }
  .dnl-stamp { width: 88px; height: 88px; left: auto; right: 18px; top: 18px; }
  .dnl-stamp b { font-size: 1.9rem; }
  .dnl-body { padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); }
  .dnl-x { top: -170px; right: auto; left: 14px; background: rgba(255, 250, 242, .92); }
  .dnl-cap strong { font-size: 1.1rem; }
  body.dn-has-mbar .dnl-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dnl, .dnl-pill, .dnl-scrim { transition: none; } }