/* ==================================================================
   Acurato UI — Pill (.chip) via Semantic Tokens
   - Light/Dark defined by CSS variables; component only reads tokens.
   - Minimal !important ONLY where third-party utilities were overriding.
   - Accessible contrast, focus-visible, reduced motion respected.
   ================================================================== */

/* THEME TOKENS ----------------------------------------------------- */
:root{
  /* Light tokens — subtle pastel gradient */
  --chip-bg-image: linear-gradient(90deg, rgba(124,58,237,0.12) 0%, rgba(236,72,153,0.12) 100%);
  --chip-bg-color: #FFFFFF;          /* solid fallback on light */
  --chip-fg: #111827;                /* gray-900 */
  --chip-inner-ring: rgba(17,24,39,0.08);
  --chip-elev: 0 1px 2px rgba(2,6,23,0.06);

  /* Neutral (opt-out) tokens */
  --chipN-bg: #F3F4F6;       /* gray-100 */
  --chipN-fg: #111827;       /* gray-900 */
  --chipN-ring: #E5E7EB;     /* gray-200 */
}

.dark{
  /* Dark tokens — subtle luminous gradient */
  --chip-bg-image: linear-gradient(90deg, rgba(167,139,250,0.20) 0%, rgba(236,72,153,0.20) 100%);
  --chip-bg-color: rgba(255,255,255,0.04); /* glassy fallback on dark */
  --chip-fg: #E5E7EB;                      /* gray-200 */
  --chip-inner-ring: rgba(255,255,255,0.20);
  --chip-elev: 0 2px 6px rgba(0,0,0,0.25);

  /* Neutral (opt-out) tokens */
  --chipN-bg: rgba(255,255,255,0.06);
  --chipN-fg: #E5E7EB;
  --chipN-ring: rgba(255,255,255,0.18);
}

/* COMPONENT -------------------------------------------------------- */
.chip{
  /* reset-ish without breaking a11y semantics */
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* shape & type */
  border-radius: 9999px;
  padding: .375rem .75rem;
  font: 700 0.75rem/1.25rem ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  letter-spacing: .01em;

  /* visuals from tokens (defensive !important vs utility overrides) */
  background-image: var(--chip-bg-image) !important;
  background-color: var(--chip-bg-color) !important;
  color: var(--chip-fg) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--chip-inner-ring), var(--chip-elev) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

/* icons inside */
.chip svg{ height: 1em; width: 1em; color: currentColor; fill: currentColor; }

/* keyboard focus */
.chip:focus-visible{
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}

/* hover/active honoring reduced motion */
@media (prefers-reduced-motion: no-preference){
  .chip{ transition: filter .15s ease, transform .15s ease; }
  .chip:hover{ filter: brightness(1.02); transform: translateY(-1px); }
  .chip:active{ transform: translateY(0); filter: brightness(.98); }
}

/* high-contrast users */
@media (prefers-contrast: more){
  .chip{ box-shadow: inset 0 0 0 2px var(--chip-inner-ring), var(--chip-elev) !important; }
}

/* NEUTRAL (opt-out) ----------------------------------------------- */
.chip--neutral{
  background-image: none !important;
  background-color: var(--chipN-bg) !important;
  color: var(--chipN-fg) !important;
  border: 1px solid var(--chipN-ring) !important;
  box-shadow: inset 0 0 0 1px var(--chipN-ring) !important;
  text-shadow: none;
}

/* Light-only variant for .stat-badge — matches chip sizing & spacing */
html:not(.dark) .stat-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4375rem .875rem; border-radius:9999px;
  font-weight:500; font-size:.8125rem;
  line-height: 1.125rem; letter-spacing:.01em;
  /* Visuals tuned for light */
  background-image: linear-gradient(90deg, rgba(124,58,237,0.12) 0%, rgba(236,72,153,0.12) 100%);
  background-color:#FFFFFF; /* fallback */
  color:#111827; /* gray-900 */
  border:1px solid #E5E7EB; /* gray-200 */
  box-shadow: inset 0 0 0 1px rgba(17,24,39,0.06), 0 1px 2px rgba(2,6,23,0.06);
  -webkit-backdrop-filter:saturate(120%) blur(4px);
  backdrop-filter:saturate(120%) blur(4px);
}
/* Keep icons sized & aligned; tick stays green via HTML utility class */
.stat-badge svg{ flex-shrink:0; height:.875rem; width:.875rem; }

/* (legacy) CTA Gradient Fix (matches provided PNG) =====================
   Locks the hero-CTA (#teste-gratis) background to a smooth violet→fuchsia gradient
   across light and dark themes, independent of Tailwind runtime tokens. */
section#teste-gratis{
  background-image: linear-gradient(135deg, #6A11CB 0%, #8E3BFF 40%, #FF4FC3 100%) !important;
}
.dark section#teste-gratis{
  background-image: linear-gradient(135deg, #6A11CB 0%, #8E3BFF 40%, #FF4FC3 100%) !important;
}

/* === Theme tokens: CTA gradient ===================================== */
:root{
  /* violet → fuchsia (semântico) */
  --cta-gradient: linear-gradient(135deg, #6A11CB 0%, #8E3BFF 40%, #FF4FC3 100%);
}
.dark{
  --cta-gradient: linear-gradient(135deg, #6A11CB 0%, #8E3BFF 40%, #FF4FC3 100%);
}

/* Classe semântica para seções do CTA */
.cta-section{
  background-image: var(--cta-gradient) !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* === CTA semantics: paragraphs & button ============================= */
:root{
  --cta-text: #FFFFFF;
  --cta-subtext: rgba(255,255,255,0.85);
  --cta-footnote: rgba(255,255,255,0.72);
  --cta-accent: #6A11CB; /* text/icon color on white button */
  --cta-button-bg: #FFFFFF;
}

/* Paragraph immediately under the heading */
.cta-sub{
  font-size: 1.125rem; /* ~text-lg */
  line-height: 1.65;
  font-weight: 400;
  color: var(--cta-subtext);
  margin-bottom: 2rem;
}

/* Small checklist under the button */
.cta-footnote{
  font-size: .875rem;
  line-height: 1.6;
  color: var(--cta-footnote);
  margin-top: 1.25rem;
}

/* CTA button */
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.75rem;
  line-height: 1.2;  /* um pouco mais largo */
  background: var(--cta-button-bg);
  color: var(--cta-accent);
  border-radius: 9999px; /* pill */
  font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,0.28); /* discreta, projetada pra baixo */
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  text-decoration: none;
}
.cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(0,0,0,0.32);
}
.cta-btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,0.28);
}
.cta-btn svg{
  height: 1.1rem;
  width: 1.1rem;
  flex-shrink: 0;
  color: var(--cta-accent);
}

/* Dark variant for .stat-badge — mirror light sizing to keep pill size identical */
.dark .stat-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4375rem .875rem; border-radius:9999px;
  font-weight:500; font-size:.8125rem;
  line-height: 1.125rem; letter-spacing:.01em;
}


/* === FAQ (A11y + Consistência) === */
.faq-entry { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.faq-entry[open] { box-shadow: 0 6px 18px rgba(16,24,40,.08); border-color: #a3a3a3; }
.faq-entry summary::-webkit-details-marker { display: none; }
.faq-entry summary { list-style: none; }
.faq-entry summary .chevron { transform: rotate(0deg); transition: transform .2s ease; }
.faq-entry[open] summary .chevron { transform: rotate(180deg); }
.faq-entry p { margin-top: .75rem; }

/* Respecta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .faq-entry, .faq-entry * { transition: none !important; }
}

/* CTA height tweak: avoid descender clipping */
.cta-btn.cta-btn--taller{ padding-top: 1.35rem; padding-bottom: 1.35rem; line-height: 1.25; }
.cta-btn.cta-btn--taller .gradient-text{ line-height: 1.25; display:inline-block; }