/* Digital Product Store — Base & Design System
 * Tokens importados de docs/design-tokens.css
 * Organização: Tokens -> Reset -> Base -> Utilitários -> Componentes -> Seções -> Legado
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Cor: superfícies ---- */
  --c-bg: #faf4ed;           /* fundo da página, creme */
  --c-bg-alt: #f4e9dd;       /* faixas/texturas alternadas */
  --c-surface: #fffdfb;      /* cards e painéis */
  --c-surface-soft: #fdf6f2; /* card destacado, blush claro */
  --c-border: #e8dbcd;       /* borda neutra 1px */
  --c-border-soft: #f0e2da;  /* borda em superfícies blush */

  /* ---- Cor: marca ---- */
  --c-ink: #212f4c;          /* navy dos títulos */
  --c-wine: #8e3b48;         /* CTA primário, palavras destacadas, script */
  --c-wine-hover: #7a3140;
  --c-wine-active: #672936;
  --c-wine-soft: #f5e6e6;    /* fundo de badge/pill */
  --c-rose: #c98b91;         /* SOMENTE ornamento decorativo */

  /* ---- Cor: texto ---- */
  --c-text: #33302e;         /* corpo */
  --c-text-muted: #6f6862;   /* legendas, bullets secundários */
  --c-text-on-wine: #fdf6f2; /* texto sobre fundo vinho */
  --c-text-strike: #756d65;  /* preço ancorado */

  /* ---- Cor: estado ---- */
  --c-error: #a12626;
  --c-success: #2f6b4f;
  --c-focus: #8e3b48;

  /* ---- Tipografia: famílias ---- */
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-script: "Parisienne", "Snell Roundhand", "Apple Chancery", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Tipografia: escala fluida (320px → 1280px) ---- */
  --t-eyebrow: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --t-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-h2: clamp(1.625rem, 1.35rem + 1.35vw, 2.375rem);
  --t-h1: clamp(2.25rem, 1.5rem + 3.8vw, 4rem);
  --t-script: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
  --t-price: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);
  --t-counter: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --ls-eyebrow: 0.16em;
  --ls-display: -0.01em;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ---- Espaçamento (base 4px) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-section: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* ---- Layout ---- */
  --w-page: 1160px;
  --w-prose: 44rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* ---- Forma ---- */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-pill: 999px;

  /* ---- Elevação ---- */
  --sh-sm: 0 1px 2px rgb(52 40 32 / 5%);
  --sh-md: 0 8px 24px rgb(52 40 32 / 7%);
  --sh-lg: 0 20px 48px rgb(52 40 32 / 10%);
  --sh-cta: 0 8px 20px rgb(142 59 72 / 22%);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- Alvo de toque ---- */
  --tap-min: 48px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}

/* ---- Tipografia: Fontes auto-hospedadas ---- */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Parisienne";
  src: url("assets/fonts/parisienne-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-wine);
  text-decoration: underline;
}

a:hover {
  color: var(--c-wine-hover);
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   3. BASE & UTILITÁRIOS
   ========================================================================== */
.container {
  width: min(100% - var(--gutter) * 2, var(--w-page));
  margin-inline: auto;
}

.container--prose {
  max-width: var(--w-prose);
}

.section {
  padding-block: var(--s-section);
}

.section--alt {
  background-color: var(--c-bg-alt);
}

.stack {
  display: flex;
  flex-direction: column;
}

.font-script {
  font-family: var(--f-script);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin-bottom: var(--s-2);
  color: var(--c-text-muted);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.lead {
  max-width: var(--w-prose);
  color: var(--c-text-muted);
  font-size: var(--t-lead);
  line-height: var(--lh-body);
}

.section-header {
  text-align: center;
  max-width: var(--w-prose);
  margin-inline: auto;
  margin-bottom: var(--s-7);
}

.section-header h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  color: var(--c-ink);
  font-weight: var(--w-semibold);
  line-height: var(--lh-heading);
}

.section-subtitle {
  color: var(--c-text-muted);
  font-size: var(--t-lead);
  margin-top: var(--s-2);
}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* Botão */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.btn--primary,
.button.primary {
  background-color: var(--c-wine);
  color: var(--c-text-on-wine);
  box-shadow: var(--sh-cta);
}

.btn--primary:hover,
.button.primary:hover {
  background-color: var(--c-wine-hover);
  color: var(--c-text-on-wine);
}

.btn--primary:active,
.button.primary:active {
  background-color: var(--c-wine-active);
}

.btn--secondary {
  background-color: transparent;
  color: var(--c-wine);
  border-color: var(--c-wine);
}

.btn--secondary:hover {
  background-color: var(--c-wine-soft);
  color: var(--c-wine-hover);
  border-color: var(--c-wine-hover);
}

.btn:disabled,
.button:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* Card */
.card {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-sm);
}

/* Badge */
.badge {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background-color: var(--c-wine-soft);
  color: var(--c-wine);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* Form Message */
.form-message {
  min-height: 1.5rem;
  margin: var(--s-3) 0 0;
  color: var(--c-text-muted);
  font-size: var(--t-sm);
  text-align: center;
}

.form-message[data-kind="error"] {
  color: var(--c-error);
}

.header-cta-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.form-message--header {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  background-color: var(--c-surface);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  z-index: 20;
}

.form-message--header:empty {
  display: none;
}

.form-message--on-wine {
  color: var(--c-text-on-wine);
}

.form-message--on-wine[data-kind="error"] {
  color: #ffcdd2;
}

.cancellation-block {
  border: 1px solid var(--c-error);
  background-color: var(--c-surface);
  margin-top: var(--s-5);
  text-align: center;
}

.cancellation-header h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  color: var(--c-ink);
  margin-block: var(--s-2);
}

.cancellation-header p {
  color: var(--c-text-muted);
  font-size: var(--t-base);
  margin-bottom: var(--s-4);
}

/* ==========================================================================
   5. SEÇÕES DA PÁGINA
   ========================================================================== */

/* 1. Header Sticky */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgb(250 244 237 / 92%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
}

.brand {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: var(--w-semibold);
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease);
}

.site-nav a:hover {
  color: var(--c-wine);
}

.nav-cta {
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-4);
  min-height: 40px;
}

/* 2. Hero */
.hero {
  padding-top: var(--s-6);
  padding-bottom: var(--s-8);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}

.hero-content {
  gap: var(--s-4);
}

.hero-title {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  font-weight: var(--w-bold);
}

.hero-title-main {
  display: block;
}

.hero-title-script {
  display: block;
  font-family: var(--f-script);
  font-size: var(--t-script);
  color: var(--c-wine);
  font-weight: var(--w-regular);
  margin-top: -0.1em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block: var(--s-3);
}

.hero-badges {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.badge-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

.badge-item svg {
  color: var(--c-wine);
  flex-shrink: 0;
}

.hero-media {
  display: flex;
  justify-content: center;
}

.hero-mockup {
  width: 100%;
  max-width: 380px;
  height: auto;
  background-color: var(--c-bg-alt);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}

/* 3. Benefícios (4 cards) */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background-color: var(--c-wine-soft);
  color: var(--c-wine);
  margin-bottom: var(--s-4);
}

.benefit-card h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  color: var(--c-ink);
  font-weight: var(--w-semibold);
  margin-bottom: var(--s-2);
}

.benefit-card p {
  color: var(--c-text-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

/* 4. Conteúdo + Autora */
.two-column-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: start;
}

.content-block {
  gap: var(--s-4);
}

.content-block h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  color: var(--c-ink);
  font-weight: var(--w-semibold);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-base);
  color: var(--c-text);
}

.check-list svg {
  color: var(--c-wine);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.author-block.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}

.author-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  background-color: var(--c-bg-alt);
  border-radius: var(--r-md);
  margin-inline: auto;
}

.author-info {
  gap: var(--s-3);
}

.author-info h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  color: var(--c-ink);
  font-weight: var(--w-semibold);
}

.author-info p {
  color: var(--c-text-muted);
  font-size: var(--t-base);
}

/* 6. FAQ */
.faq-list {
  gap: var(--s-4);
}

.faq-item {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease);
}

.faq-item[open] {
  border-color: var(--c-wine);
}

.faq-question {
  padding: var(--s-4) var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "+";
  font-family: var(--f-body);
  font-size: 1.25rem;
  color: var(--c-wine);
  transition: transform var(--dur-base) var(--ease);
}

.faq-item[open] .faq-question::after {
  content: "−";
}

.faq-answer {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--c-text-muted);
  font-size: var(--t-base);
  border-top: 1px solid var(--c-border-soft);
  margin-top: var(--s-2);
  padding-top: var(--s-4);
}

/* 7. Oferta / Preço / Contador */
.offer-card {
  text-align: center;
  background-color: var(--c-surface-soft);
  border: 2px solid var(--c-border-soft);
  align-items: center;
  padding: var(--s-7) var(--s-6);
}

.offer-card h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  color: var(--c-ink);
  margin-top: var(--s-3);
}

.offer-card p {
  color: var(--c-text-muted);
  max-width: var(--w-prose);
}

.price-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-4);
  margin-block: var(--s-4);
}

.price-original {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: var(--c-text-strike);
  text-decoration: line-through;
}

.price-current {
  font-family: var(--f-display);
  font-size: var(--t-price);
  font-weight: var(--w-bold);
  color: var(--c-wine);
}

.countdown-container {
  margin-block: var(--s-3);
  width: 100%;
  min-height: 76px;
}

.countdown-expired {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  padding: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  text-align: center;
  margin: 0;
}

.countdown-label {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
}

.countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}

.timer-number {
  font-family: var(--f-display);
  font-size: var(--t-counter);
  font-weight: var(--w-bold);
  color: var(--c-ink);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}

.timer-text {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-top: var(--s-1);
  text-transform: uppercase;
}

.timer-sep {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: var(--w-bold);
  color: var(--c-wine);
  margin-bottom: var(--s-3);
}

.offer-cta {
  width: 100%;
  max-width: 360px;
  margin-top: var(--s-3);
}

/* 8. CTA Final (Faixa Vinho) */
.cta-banner {
  background-color: var(--c-wine);
  color: var(--c-text-on-wine);
  padding-block: var(--s-section);
}

.cta-banner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}

.cta-banner-content h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  color: var(--c-text-on-wine);
}

.check-list--on-wine li {
  color: var(--c-text-on-wine);
}

.check-list--on-wine svg {
  color: var(--c-surface);
}

.btn--on-wine {
  background-color: var(--c-surface);
  color: var(--c-wine);
  box-shadow: 0 4px 14px rgb(0 0 0 / 15%);
}

.btn--on-wine:hover {
  background-color: #ffffff;
  color: var(--c-wine-hover);
}

.cta-mockup {
  max-width: 220px;
  height: auto;
  background-color: var(--c-bg-alt);
  margin-inline: auto;
  filter: drop-shadow(0 10px 20px rgb(0 0 0 / 25%));
  border-radius: var(--r-sm);
}

/* 9. Footer */
.site-footer {
  background-color: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  padding-block: var(--s-6);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border-soft);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--t-sm);
}

.footer-nav a {
  color: var(--c-text-muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--c-wine);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

.social-links {
  display: flex;
  gap: var(--s-3);
  color: var(--c-text-muted);
}

/* ==========================================================================
   6. MEDIA QUERIES (≥ 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }

  .two-column-section {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }

  .cta-banner-grid {
    grid-template-columns: auto 1fr;
    gap: var(--s-8);
  }

  .author-block.card {
    grid-template-columns: 280px 1fr;
    gap: var(--s-7);
  }

  .two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   7. CLASSES LEGADAS (COMPATIBILIDADE)
   ========================================================================== */
.panel {
  margin: var(--s-4) auto;
  padding: clamp(1.25rem, 4vw, 3rem);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

/* Exceção defensável: !important garante prioridade absoluta à utilitária de estado */
.hidden {
  display: none !important;
}

.success-page {
  max-width: 640px;
  margin: var(--s-8) auto;
  text-align: center;
}

.success-page .btn,
.success-page .button {
  margin: var(--s-4) 0;
}

.price {
  margin: var(--s-5) 0;
  font-size: var(--t-price);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}

.two-column {
  display: grid;
  gap: var(--s-6);
}

/* ==========================================================================
   CRO — Linha de confiança e barra CTA fixa
   ========================================================================== */

/* Linha de confiança acima da dobra */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

.trust-item svg {
  flex: 0 0 auto;
  color: var(--c-wine);
}

/* Barra CTA fixa — apenas mobile.
   Desktop já possui CTA persistente no header sticky. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: none;
  background-color: rgb(255 253 251 / 96%);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-border);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 200ms ease;
}

.sticky-cta[data-visible="true"] {
  transform: translateY(0);
}

.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: 40rem;
  margin: 0 auto;
}

.sticky-cta-price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sticky-cta-original {
  font-size: var(--t-eyebrow);
  color: var(--c-text-strike);
  text-decoration: line-through;
}

.sticky-cta-current {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}

.sticky-cta-btn {
  flex: 0 0 auto;
  padding: var(--s-3) var(--s-5);
}

@media (max-width: 767px) {
  .sticky-cta {
    display: block;
  }

  /* Evita que a barra cubra o final do conteúdo */
  .site-footer {
    padding-bottom: var(--s-9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}