/* Disrupty brand theme override for funil (telas 1-6).
   Loaded after original inline CSS to win the cascade.
   Does NOT touch animations, transitions, transforms or keyframes. */

:root {
  --brand-bg: #0A0A0A;
  --brand-surface: #1A1A1A;
  --brand-surface-2: #141414;
  --brand-yellow: #FFD000;
  --brand-yellow-dark: #FFB000;
  --brand-text: #FFFFFF;
  --brand-muted: #A1A1A1;
  --brand-border: rgba(255, 208, 0, 0.18);
  --brand-shadow: 0 10px 30px -10px rgba(255, 208, 0, 0.35);
  --brand-radius: 12px;
  --brand-radius-lg: 16px;
}

html, body {
  background: var(--brand-bg) !important;
  color: var(--brand-text) !important;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}

body * {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Neutralize light backgrounds coming from original CSS */
body, main, section, article, header, footer, aside, nav, div {
  background-color: transparent;
}

/* Cards / container-like surfaces */
[class*="card" i],
[class*="Card"],
[class*="container" i]:not(body):not(html),
[class*="panel" i],
[class*="wrapper" i]:not(body) {
  background-color: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-lg) !important;
  color: var(--brand-text) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Muted / secondary text heuristics */
small, [class*="muted" i], [class*="subtitle" i], [class*="caption" i] {
  color: var(--brand-muted) !important;
}

/* Links */
a {
  color: var(--brand-yellow) !important;
}

/* Primary buttons */
button,
[role="button"],
[type="submit"],
[type="button"],
a[class*="btn" i],
a[class*="button" i],
[class*="btn-primary" i],
[class*="Button"] {
  background: var(--brand-yellow) !important;
  color: #0A0A0A !important;
  border: 1px solid var(--brand-yellow) !important;
  border-radius: var(--brand-radius) !important;
  font-weight: 600 !important;
  box-shadow: var(--brand-shadow) !important;
}

button:hover,
[role="button"]:hover,
[type="submit"]:hover,
a[class*="btn" i]:hover {
  background: var(--brand-yellow-dark) !important;
  border-color: var(--brand-yellow-dark) !important;
}

/* Secondary / outline buttons */
[class*="secondary" i],
[class*="outline" i],
[class*="ghost" i] {
  background: transparent !important;
  color: var(--brand-yellow) !important;
  border: 1px solid var(--brand-yellow) !important;
  box-shadow: none !important;
}

/* Inputs */
input, textarea, select {
  background-color: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--brand-radius) !important;
  caret-color: var(--brand-yellow);
}
input::placeholder, textarea::placeholder { color: var(--brand-muted) !important; }
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--brand-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.2) !important;
}

/* Progress bars */
progress,
[role="progressbar"],
[class*="progress" i] {
  background-color: var(--brand-surface) !important;
  border-radius: 999px !important;
  color: var(--brand-yellow) !important;
  overflow: hidden;
}
[class*="progress" i] > *,
[role="progressbar"] > * {
  background: var(--brand-yellow) !important;
  background-color: var(--brand-yellow) !important;
}
progress::-webkit-progress-bar { background: var(--brand-surface) !important; }
progress::-webkit-progress-value { background: var(--brand-yellow) !important; }
progress::-moz-progress-bar { background: var(--brand-yellow) !important; }

/* SVG icons default to white; icons inside primary buttons stay dark */
svg { color: currentColor; fill: currentColor; }
button svg, [role="button"] svg, [type="submit"] svg { color: #0A0A0A !important; }

/* Selection */
::selection { background: var(--brand-yellow); color: #0A0A0A; }

/* Quiz option buttons (telas 2/3/4): neutral by default, yellow on hover/focus/active — same feel as homepage CTA. */
button.rounded-2xl {
  background: rgba(255,255,255,0.04) !important;
  color: var(--brand-text) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  button.rounded-2xl:hover {
    background: var(--brand-yellow) !important;
    color: #0A0A0A !important;
    border-color: var(--brand-yellow) !important;
    box-shadow: var(--brand-shadow) !important;
  }
  button.rounded-2xl:hover svg { color: #0A0A0A !important; fill: #0A0A0A !important; }
}
button.rounded-2xl:focus,
button.rounded-2xl:focus-visible,
button.rounded-2xl:active,
button.rounded-2xl[aria-pressed="true"],
button.rounded-2xl[data-selected="true"],
button.rounded-2xl[data-tap-selected="true"],
button.rounded-2xl.tap-selected {
  background: var(--brand-yellow) !important;
  background-color: var(--brand-yellow) !important;
  color: #0A0A0A !important;
  border-color: var(--brand-yellow) !important;
  box-shadow: var(--brand-shadow) !important;
  transition: background-color .05s ease, border-color .05s ease, color .05s ease, box-shadow .05s ease !important;
}
button.rounded-2xl:active svg,
button.rounded-2xl:focus svg,
button.rounded-2xl[aria-pressed="true"] svg,
button.rounded-2xl[data-selected="true"] svg,
button.rounded-2xl[data-tap-selected="true"] svg,
button.rounded-2xl.tap-selected svg { color: #0A0A0A !important; fill: #0A0A0A !important; }
/* Mobile tap: instant yellow feedback on touch */
button.rounded-2xl { -webkit-tap-highlight-color: transparent; }

/* Force Disrupty primary token to Disrupty yellow — turns bg-accent (progress fill) yellow across telas. */
:root { --disrupty-primary: #FFD000 !important; --disrupty-primary-press: #FFB000 !important; }
.bg-accent { background-color: #FFD000 !important; }

/* Disrupty logo — floating, glowing, replaces Disrupty favicon in header */
@keyframes disrupty-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes disrupty-glow {
  0%, 100% { filter: drop-shadow(0 6px 14px rgba(255,208,0,0.35)) drop-shadow(0 0 6px rgba(255,208,0,0.25)); }
  50%      { filter: drop-shadow(0 10px 22px rgba(255,208,0,0.55)) drop-shadow(0 0 14px rgba(255,208,0,0.45)); }
}
.disrupty-logo {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  animation: disrupty-float 3.4s ease-in-out infinite, disrupty-glow 3.4s ease-in-out infinite;
  will-change: transform, filter;
}
@media (min-width: 768px) {
  .disrupty-logo { width: 64px !important; height: 64px !important; }
}

/* ============ Tela 1 — premium polish (scoped by #tela1-slider / #tela1-pct) ============ */

/* Slider track — soft glow around yellow fill */
#tela1-slider {
  height: 14px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.55), 0 0 24px -6px rgba(255,208,0,0.35) !important;
}

/* Slider thumb — yellow, glowing, premium */
#tela1-slider::-webkit-slider-thumb {
  width: 30px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #FFE04D 0%, #FFD000 55%, #FFB000 100%) !important;
  box-shadow:
    0 8px 24px rgba(255,208,0,0.55),
    0 0 0 1px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(0,0,0,0.15) !important;
  border: none !important;
}
#tela1-slider::-moz-range-thumb {
  width: 30px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #FFE04D 0%, #FFD000 55%, #FFB000 100%) !important;
  box-shadow:
    0 8px 24px rgba(255,208,0,0.55),
    0 0 0 1px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(0,0,0,0.15) !important;
  border: none !important;
}

/* Percentage number — big premium gradient with glow */
#tela1-pct {
  background: linear-gradient(180deg, #FFE04D 0%, #FFD000 60%, #FFB000 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  filter: drop-shadow(0 4px 18px rgba(255,208,0,0.45));
  font-size: clamp(56px, 14vw, 88px) !important;
  line-height: 1 !important;
}

/* Tela 1 headline — tighter, more premium */
body:has(#tela1-slider) h1,
body:has(#tela1-slider) h2 {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

/* ================= Premium ambient background (matches homepage) ================= */
html, body { position: relative; overflow-x: hidden; background: transparent !important; }

/* Solid deep base */
html {
  background:
    linear-gradient(180deg, #131313 0%, #0A0A0A 60%, #0A0A0A 100%) !important;
}

/* Two soft yellow blobs — same recipe as home (rgba(255,193,7,.10) with heavy blur) */
body::before {
  content: "";
  position: fixed;
  top: -220px;
  left: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.14);
  filter: blur(140px);
  pointer-events: none;
  z-index: -2;
  animation: disrupty-blob-a 16s ease-in-out infinite alternate;
  will-change: transform;
}

body::after {
  content: "";
  position: fixed;
  bottom: -260px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: rgba(255, 176, 0, 0.12);
  filter: blur(160px);
  pointer-events: none;
  z-index: -2;
  animation: disrupty-blob-b 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes disrupty-blob-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(60px, 40px, 0) scale(1.1); }
}
@keyframes disrupty-blob-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-70px, -50px, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
}

/* Tela 6 — counter number yellow (was green) */
#obg-counter {
  color: var(--brand-yellow) !important;
  text-shadow: 0 0 30px rgba(255, 208, 0, 0.45) !important;
}

/* Tela 6 — title highlighted in yellow with black text */
.obg-title-highlight {
  display: inline !important;
  background: var(--brand-yellow) !important;
  color: #0A0A0A !important;
  padding: 0.3em 0.55em !important;
  border-radius: 6px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  line-height: 1.55 !important;
}
#obg-title {
  text-align: center !important;
}

/* Tela 6 — mockup entrance animation (plays once on load, then stays) */
@keyframes mockup-entrance {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    filter: drop-shadow(0 0 0 rgba(255, 208, 0, 0));
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
    filter: drop-shadow(0 12px 40px rgba(255, 208, 0, 0.5));
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 8px 30px rgba(255, 208, 0, 0.35));
  }
}

.tela6-mockup {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: mockup-entrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity, filter;
}

/* Tela 6 spacing: slightly more breathing room between progress bar, mockup and title */
.tela6-content {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  justify-content: flex-start !important;
}
.tela6-mockup-wrap {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS HARDENING (todas as telas do funil)
   - Sem mudanças visuais/identidade; apenas comportamento estrutural
   ========================================================================== */

/* iOS safe areas + viewport dinâmica correta */
:root {
  --dy-safe-top: env(safe-area-inset-top, 0px);
  --dy-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dy-safe-left: env(safe-area-inset-left, 0px);
  --dy-safe-right: env(safe-area-inset-right, 0px);
}

/* Trava global de overflow horizontal — não afeta transforms/animações verticais */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Fix 100vh no iOS: preferir dvh onde já é usado; garantir min-height segura */
body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: var(--dy-safe-left);
  padding-right: var(--dy-safe-right);
}

/* Nenhum descendente pode gerar scroll lateral */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Mídia e embeds respeitando largura do container */
img, video, iframe, canvas, svg, picture, embed, object {
  max-width: 100%;
  height: auto;
}
video, iframe {
  display: block;
}

/* CORREÇÃO CRÍTICA — auto-zoom do iOS Safari em inputs.
   iOS aplica zoom automático quando o input tem font-size < 16px.
   Forçamos >= 16px apenas no mobile; desktop mantém tamanho original visual
   (não há zoom em desktop, então não impacta identidade). */
@media (max-width: 768px) {
  input, select, textarea,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="search"],
  input[type="url"], input[type="date"], input[type="datetime-local"],
  input[type="month"], input[type="time"], input[type="week"] {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

/* Toque confortável em botões/links interativos no mobile (min 44px alvo Apple) */
@media (max-width: 768px) {
  button, [role="button"], a[class*="btn" i], a[data-variant],
  [type="submit"], [type="button"] {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* (Removido) trava max-width global em containers — quebrava a largura original do card do funil.
   O overflow-x já é travado em html/body acima; larguras individuais permanecem intocadas. */


/* Quebra de palavras longas / URLs para não estourar container */
h1, h2, h3, h4, h5, h6, p, span, li, a, label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Modais / popups nunca ultrapassam a viewport */
[class*="modal" i], [role="dialog"], [class*="popup" i] {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

/* Estabilidade visual: evitar shifts durante animação/scroll no Safari */
body::before, body::after {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Tela 6 — respeita safe-area inferior no conteúdo principal */
.tela6-content {
  padding-bottom: max(1rem, var(--dy-safe-bottom)) !important;
}

/* Ajustes finos para iPhone SE / telas muito pequenas */
@media (max-width: 375px) {
  .disrupty-logo { width: 48px !important; height: 48px !important; }
  #tela1-pct { font-size: clamp(48px, 13vw, 72px) !important; }
  .tela6-mockup { width: 96px; height: 96px; }
}