/* KYRVARO — Identidade 2026
 * Camada de apresentação sobre style.css; lógica e componentes do funil preservados.
 * Paleta de referência: manual enviado pelo cliente.
 */
:root {
  --pedra: #eeecec;
  --linha: #dcdcd9;
  --tinta: #15161a;
  --grafite: #56585e;
  --sinal: #c8263e;
  --aco: #3f5c70;
  --sucesso: #2c6a4e;
  --atencao: #a4400e;
  --papel: #fafafa;
  --papel-alto: #ffffff;
  --vinho: #6b1a30;
  --vinho-escuro: #531326;
  --rosa-po: #e8cbd2;
  /* Aliases kept for compatibility with the original styles */
  --deep-purple: var(--vinho);
  --light-purple: var(--vinho);
  --electric-blue: var(--aco);
  --cyan: var(--vinho);
  --dark-navy: var(--pedra);
  --darker: var(--papel);
  --white: var(--tinta);
  --light-gray: var(--grafite);
  --muted: var(--grafite);
  --muted-low: #77777a;
  --border: var(--linha);
  --border-strong: #cececa;
  --success: var(--sucesso);
  --danger: var(--sinal);
  --gradient: var(--vinho);
  --gradient-soft: #f4e9eb;
  --gradient-text: var(--vinho);
}
html { background: var(--pedra); }
body {
  background: var(--pedra);
  color: var(--tinta);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
}
/* quiet, recognizable dotted motif on larger screens */
@media (min-width: 940px) {
  body::before, body::after {
    content: ''; position: fixed; pointer-events: none; z-index: 0;
  }
  body::before {
    width: min(23vw, 330px); height: min(42vh, 320px);
    left: max(22px, calc(50vw - 650px)); top: 115px;
    border-radius: 3px;
    background-color: var(--vinho);
    background-image: radial-gradient(circle, rgba(255,255,255,.76) 1.1px, transparent 1.4px);
    background-size: 20px 20px;
    box-shadow: 0 28px 60px rgba(21,22,26,.06);
  }
  body::after {
    width: min(20vw, 280px); height: 195px;
    right: max(30px, calc(50vw - 620px)); bottom: 48px;
    background-image: radial-gradient(circle, rgba(107,26,48,.42) .95px, transparent 1.3px);
    background-size: 19px 19px;
    opacity: .7;
  }
}
.app {
  z-index: 1; max-width: 620px; min-height: 100svh;
  padding-top: 0;
  background: var(--papel);
  border-inline: 1px solid var(--linha);
  box-shadow: 0 24px 80px rgba(21,22,26,.075);
}
.topbar {
  background: rgba(250,250,250,.96);
  border-bottom: 1px solid var(--linha);
  padding: 18px clamp(22px, 5vw, 42px) 13px;
  backdrop-filter: blur(14px);
}
.topbar-brand { gap: 13px; margin-bottom: 20px; }
.topbar-logo {
  width: 39px; height: 39px;
  border-radius: 0; background: transparent; box-shadow: none;
  flex: 0 0 39px; overflow: visible;
}
.topbar-logo img { display: block; width: 35px; height: 35px; object-fit: contain; }
.topbar-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.brand-wordmark {
  font-size: 23px !important; font-weight: 850 !important;
  letter-spacing: -.075em !important; color: var(--tinta) !important;
  margin: 0 !important; line-height: 1.05;
}
.brand-punct { display: inline !important; color: var(--sinal) !important; font-size: inherit !important; }
.brand-tagline {
  display: block; color: var(--grafite) !important;
  font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: .005em !important; margin-top: 2px !important;
}
.progress { height: 3px; background: var(--linha); border-radius: 0; }
.progress-fill { background: var(--vinho); box-shadow: none; border-radius: 0; }
.progress-label {
  color: var(--grafite); margin-top: 9px; font-size: 10px;
  font-weight: 550; letter-spacing: .11em; text-transform: uppercase;
}
.progress-label .step-num { color: var(--vinho); font-weight: 750; }
.screen { padding: 38px clamp(22px, 6.5vw, 48px) 52px; }
.screen.active { animation: kyrvaroReveal .5s cubic-bezier(.2,.85,.25,1) both; }
@keyframes kyrvaroReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hero-kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 23px;
  color: var(--vinho); font-family: 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: .06em; font-size: 10px; font-weight: 500;
}
.hero-kicker-line { height: 1px; flex: 1; background: var(--linha); }
.hero-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sinal); flex: 0 0 7px; }
h1.q-title, h1.q-title-lg {
  color: var(--tinta); font-weight: 850; letter-spacing: -.051em;
  line-height: 1.12; text-wrap: balance;
}
h1.q-title { font-size: clamp(27px, 5vw, 36px); margin-bottom: 15px; }
h1.q-title-lg { font-size: clamp(34px, 6.5vw, 48px); margin-bottom: 18px; }
.q-sub { color: var(--grafite); font-size: 15px; line-height: 1.72; margin-bottom: 27px; }
.q-sub strong, .info-card strong, .diag-text strong, .cta-secondary-text strong {
  color: var(--tinta);
}
.text-grad, .score-value, .snapshot-value, .seal-value {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--vinho);
}
.eyebrow, .eyebrow.purple, .eyebrow.warn {
  background: transparent; border: 1px solid var(--linha);
  border-radius: 100px; padding: 7px 12px;
  color: var(--vinho); font-size: 10px; font-weight: 600;
  letter-spacing: .095em; margin-bottom: 19px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.eyebrow.warn { color: var(--atencao); border-color: #e6c5b5; background: #fbf4ef; }
.eyebrow-dot { width: 6px; height: 6px; background: var(--sinal); box-shadow: none; }
.eyebrow.warn .eyebrow-dot { background: var(--atencao); }
/* Controls */
.btn {
  background: var(--vinho); color: #fff;
  box-shadow: none; border-radius: 7px;
  min-height: 56px; padding: 16px 20px;
  font-size: 14px; font-weight: 750; letter-spacing: -.015em;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn:hover { background: var(--vinho-escuro); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(107,26,48,.17); }
.btn:focus-visible, .option:focus-visible, .field input:focus-visible, .field select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(200,38,62,.4); outline-offset: 3px;
}
.btn-ghost {
  background: transparent; border: 1.5px solid var(--tinta);
  color: var(--tinta); box-shadow: none;
}
.btn-ghost:hover { background: var(--pedra); border-color: var(--vinho); color: var(--vinho); box-shadow: none; }
.btn-arrow::after { font-size: 18px; }
.btn.btn-arrow:hover::after { transform: translateX(4px); }
.options { gap: 11px; margin-bottom: 19px; }
.option {
  background: var(--papel-alto); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 9px;
  padding: 19px 18px;
  box-shadow: none;
}
.option:hover, .option:focus {
  background: #f9f2f4; border-color: var(--vinho);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(21,22,26,.04);
}
.option.selected { background: #f7ebee; border-color: var(--vinho); }
.option-circle { border-color: #b8b8b4; width: 20px; height: 20px; }
.option.selected .option-circle { border-color: var(--vinho); background: var(--vinho); box-shadow: 0 0 0 4px rgba(107,26,48,.09); }
.option strong { color: var(--tinta); font-weight: 700; }
.field label, .snapshot-label, .potential-label, .analysis-block-tag, .step-block-num, .seal-top {
  color: var(--vinho); font-family: 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: .085em;
}
.field input, .field select, .field textarea {
  background: var(--papel-alto); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 7px;
  min-height: 53px; box-shadow: none;
}
.field input::placeholder, .field textarea::placeholder { color: #818185; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--vinho); background: #fff;
  box-shadow: 0 0 0 3px rgba(107,26,48,.08);
}
/* Cards and diagnostics */
.info-card, .analysis-block, .step-block, .testi, .viral-format, .potential-main, .snapshot-item {
  background: var(--papel-alto); border: 1px solid var(--linha);
  box-shadow: none; border-radius: 9px; color: var(--tinta);
}
.info-card.success { background: #f2f8f5; border-color: #bed9c9; }
.info-card.warn { background: #fbf5f1; border-color: #e8d0c2; }
.info-card-title { color: var(--tinta); font-size: 13px; }
.info-card-title .ico { background: #f3e5e8; color: var(--vinho); border-radius: 5px; }
.info-card.success .ico { background: var(--sucesso); color: #fff; }
.info-card.warn .ico { background: var(--atencao); color: #fff; }
.info-card p { color: var(--grafite); }
.reveal-card, .analysis-block.highlight {
  background: #f4e9eb; border: 1px solid #e5cbd2;
  box-shadow: none; border-radius: 10px;
}
.reveal-card::before { background: none; }
.reveal-card-icon { background: var(--vinho); color: #fff; box-shadow: none; }
.reveal-card h2, .reveal-card p { color: var(--tinta); }
.analysis-block.highlight::before { background: var(--vinho); }
.analysis-block-tag { font-size: 10px; }
.snapshot-item { border-left: 3px solid var(--vinho); }
.snapshot-value { font-size: 31px; }
.snapshot-sub, .viral-format-desc, .testi-role, .meta-pill, .diag-text em { color: var(--grafite); }
.snapshot-conclusion, .testi-result { background: #f3eef0; border: 1px solid #e9d9de; color: var(--tinta); }
.snapshot-conclusion strong, .testi-result-value, .testi-result-label { color: var(--vinho); }
.viral-format-rank, .step-block-num-circle { background: var(--vinho); color: #fff; box-shadow: none; }
.meta-pill { background: #f9f7f7; border-color: var(--linha); color: var(--vinho); }
.diag-text, .diag-text strong, .potential-value, .breakdown-label, .testi-quote, .testi-name { color: var(--tinta); }
.step-block { border-left: 3px solid var(--vinho); }
.testi-avatar { background: var(--vinho); color: #fff; }
.score-ring-bg { stroke: var(--linha); }
.score-ring-fill { stroke: var(--vinho); filter: none; }
.score-label { color: var(--grafite); }
.potential-stars { color: var(--atencao); }
.breakdown-bar { background: var(--linha); }
.media-frame, .photo-item, .single-photo, .hero-video-frame {
  border: 1px solid var(--linha); border-radius: 9px;
  box-shadow: 0 12px 28px rgba(21,22,26,.10);
}
.hero-video-frame { background: var(--tinta); }
.hero-video-caption { color: var(--grafite); font-size: 13px; }
.hero-video-caption strong { color: var(--tinta); }
.media-placeholder {
  background: radial-gradient(circle at 50% 30%, rgba(107,26,48,.3), transparent 68%), var(--tinta);
  color: white;
}
.media-label { color: #fff; }
.media-badge { color: #fff; }
.media-badge.b { background: var(--aco); }
.media-corner-tag { background: var(--vinho); color: #fff; }
.video-overlay::after { background: var(--vinho); box-shadow: 0 6px 22px rgba(107,26,48,.25); }
.sound-activator { background: var(--vinho); border-color: white; box-shadow: 0 8px 24px rgba(107,26,48,.25); }
.sound-activator:hover { box-shadow: 0 12px 28px rgba(107,26,48,.35); }
/* Guarantee is the special wine accent block from the brand system. */
.seal-block {
  background: var(--vinho); border: none; border-radius: 8px;
  box-shadow: 0 12px 30px rgba(107,26,48,.13);
}
.seal { background: rgba(255,255,255,.85); box-shadow: none; }
.seal-inner { background: var(--vinho); border: 1px solid rgba(255,255,255,.5); }
.seal-top, .seal-value, .seal-label, .seal-bottom { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.seal-block h2, .seal-block h3, .seal-block p, .seal-block strong { color: #fff; }
.micro-proof { background: var(--papel-alto); border-color: var(--linha); border-radius: 8px; }
.micro-proof-text { color: var(--grafite); }
.cta-secondary-text { color: var(--grafite); }
.ebook-cover {
  background: var(--vinho); color: #fff;
  box-shadow: 0 22px 42px rgba(107,26,48,.22); border-radius: 4px;
}
.ebook-cover-tag, .ebook-cover-title, .ebook-cover-brand { color: #fff; }
.ebook-cover-brand::before { border-radius: 0; background: #fff; color: var(--vinho); }
.lgpd-label { color: var(--grafite); }
.lgpd-label a { color: var(--vinho); border-bottom-color: rgba(107,26,48,.3); }
.lgpd-label a:hover { color: var(--sinal); border-bottom-color: var(--sinal); }
.lgpd-label input[type="checkbox"] { background: #fff; border-color: #bdbdb9; }
.lgpd-label input[type="checkbox"]:checked { background: var(--vinho); box-shadow: 0 0 0 3px #f1dfe4; }
.lgpd-label input[type="checkbox"]:hover { border-color: var(--vinho); background: #faf6f7; }
.lgpd-label input[type="checkbox"]:checked:hover { background: var(--vinho); }
.recovery-banner { background: var(--sucesso); color: white; box-shadow: 0 12px 28px rgba(44,106,78,.18); }
.footer-credit {
  border-top: 1px solid var(--linha); color: var(--grafite);
  font-size: 10px; letter-spacing: .09em; font-weight: 600;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.small-note { color: var(--grafite); }
@media (min-width: 600px) {
  .app { box-shadow: 0 24px 80px rgba(21,22,26,.075); }
  h1.q-title { font-size: 36px; }
  h1.q-title-lg { font-size: 44px; }
  .screen { padding-top: 45px; }
}
@media (max-width: 440px) {
  .topbar { padding: 14px 20px 12px; }
  .topbar-brand { margin-bottom: 15px; }
  .brand-wordmark { font-size: 21px !important; }
  .brand-tagline { font-size: 9px !important; }
  .screen { padding: 29px 20px 40px; }
  h1.q-title-lg { font-size: 32px; }
  h1.q-title { font-size: 27px; }
  .hero-kicker { margin-bottom: 18px; }
  .option { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Guarantee detail needs explicit contrast against the wine block. */
.seal-block > p { color: #fff !important; opacity: .88; }
.seal-block .micro-proof-text strong { color: var(--tinta) !important; }
.seal-block .micro-proof-text { color: var(--grafite) !important; }