/* ==========================================================================
   Krone Capital — landing "Consórcio estruturado para empresas"
   Ported from the Claude Design source (Krone Landing.dc.html).

   The page markup keeps the design's original inline styles for fidelity.
   This file adds what inline styles can't express: global rules, keyframes,
   :hover / :focus states, the image-slot placeholders, and mobile tuning.
   Hover/focus rules use !important because they must win over the inline
   base declarations on the same elements.
   ========================================================================== */

/* ---------- Globals (from the design's <style> block) ---------- */
html, body { margin: 0; padding: 0; background: #0A0A09; }
body {
  font-family: 'Manrope', sans-serif;
  color: #F4F1EA;
  -webkit-font-smoothing: antialiased;
}
a { color: #A67C0A; text-decoration: none; }
a:hover { color: #7E5D06; }
* { box-sizing: border-box; }
input::placeholder { color: #A49C90; }

@keyframes krFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Image slots (placeholders for the design's x-import assets) ----- */
.img-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,183,0,0.06), transparent 60%),
    #101010;
  color: #8A8478;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 16px;
}
.img-slot--light {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,183,0,0.08), transparent 60%),
    #F1EDE4;
  color: #A49C90;
}

/* ---------- Interactive states (style-hover / style-focus in the source) ---- */

/* Primary gold button — hero + CTA */
.btn-gold:hover {
  background: #FFC533 !important;
  transform: translateY(-2px);
}

/* Text link "Qual estrutura faz sentido no meu caso?" */
.link-underline:hover {
  color: #7E5D06 !important;
  border-color: rgba(126,93,6,0.6) !important;
}

/* Contrast cards (light) */
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(16,12,8,0.04), 0 18px 44px -14px rgba(16,12,8,0.16) !important;
}

/* Contrast card (dark / terceira via) */
.card-lift-dark:hover {
  transform: translateY(-4px);
}

/* Quiz answer options */
.quiz-opt:hover {
  border-color: #FFB700 !important;
  background: #FFFDF6 !important;
  transform: translateX(5px);
  box-shadow: 0 8px 22px -10px rgba(16,12,8,0.16) !important;
}

/* Quiz contact inputs */
.quiz-input:focus {
  border-color: #FFB700 !important;
  box-shadow: 0 0 0 3px rgba(255,183,0,0.15) !important;
}

/* Dark buttons — contact submit + agenda link on result */
.btn-dark:hover {
  background: #241F16 !important;
  color: #F9F6EF !important;
  transform: translateY(-2px);
}

/* Muted WhatsApp link on result */
.link-muted:hover { color: #A67C0A !important; }

/* Back button */
.btn-back:hover { color: #0E0C08 !important; }

/* Footer link */
.foot-link:hover { color: #B8B3A8 !important; }

/* Disabled submit stays quiet */
button:disabled { cursor: not-allowed; }

/* ---------- Mobile tuning ---------- */
@media (max-width: 640px) {
  main section { padding-left: 22px !important; padding-right: 22px !important; }
  .quiz-shell { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Campos do quiz em 16px no mobile — abaixo disso o iOS dá zoom automático ao
   focar e desenquadra o card com o teclado aberto. Vale para as duas variantes:
   é correção de defeito, não diferença de teste. (O main.js gera 15px inline.) */
@media (max-width: 640px) {
  .quiz-input { font-size: 16px !important; }
}

/* ==========================================================================
   VARIANTE B — "quiz no topo" (index-b.html)

   Tudo daqui para baixo é escopado por body[data-variant="b"] e vem DEPOIS das
   regras acima de propósito. O index.html (variante A, o controle) não tem o
   atributo data-variant, então nenhuma linha deste bloco o alcança — e a
   especificidade extra (0,2,1) vence as regras de cima mesmo com !important
   dos dois lados. Editar as regras acima sem escopo mudaria as DUAS páginas e
   invalidaria a comparação.
   ========================================================================== */

/* ---------- Hero-diagnóstico: uma coluna só, em TODAS as larguras ----------
   A versão de celular (copy em cima, quiz logo abaixo) é a que vale para o
   desktop também. Sem grade de duas colunas: o que muda entre telas é só o
   tamanho do texto e o respiro, nunca o empilhamento. Assim as duas pontas do
   teste veem a mesma página, e não dois layouts diferentes. */
body[data-variant="b"] .hero-b {
  position: relative;
  background: #0A0A09;
  overflow: hidden;
  padding: 52px 40px 76px;
}
body[data-variant="b"] .hero-b-grid {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
body[data-variant="b"] .hero-b-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
body[data-variant="b"] .hero-b-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,183,0,0.32);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFB700;
  margin-bottom: 24px;
}
body[data-variant="b"] .hero-b-h1 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -1.4px;
  color: #F9F6EF;
  margin: 0 0 18px;
  text-wrap: balance;
}
body[data-variant="b"] .hero-b-h1 span { color: #FFB700; }
body[data-variant="b"] .hero-b-sub {
  font-size: 17px;
  line-height: 1.65;
  color: #E9E9E9;
  margin: 0 0 26px;
  text-wrap: pretty;
}
body[data-variant="b"] .hero-b-rule {
  width: 48px;
  height: 1px;
  background: #FFB700;
  opacity: 0.6;
  margin-bottom: 24px;
}

/* A faixa compacta com foto, nome e números do Brunno foi retirada do hero: a
   seção de autoridade, mais abaixo, já cumpre esse papel — e repetir o mesmo
   bloco duas vezes só empurrava o formulário para baixo. */

/* ---------- Bloco do quiz ---------- */
body[data-variant="b"] .hero-b-quiz { position: relative; }
body[data-variant="b"] .hero-b-glowcard {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 420px;
  max-width: 130%;
  background: radial-gradient(closest-side, rgba(255,183,0,0.10), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
/* Não existe rótulo nem microcopy acima do card: a primeira linha DENTRO dele
   já diz "Diagnóstico de Compra — 01 / 05", e o que a pessoa precisa saber
   antes de responder (sem CPF, contato só no fim) está logo abaixo, no trilho.
   Repetir isso em cima empilhava cinco blocos de texto antes do quiz. */
body[data-variant="b"] .quiz-frame { position: relative; z-index: 1; }

/* Trilho de prova e chips vivem FORA do #quiz-card — o main.js reescreve o
   innerHTML dele a cada passo e levaria junto qualquer coisa que estivesse lá. */
body[data-variant="b"] .hero-b-trilho {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #B8B3A8;
  margin: 14px 0 0;
}
body[data-variant="b"] .hero-b-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
body[data-variant="b"] .hero-b-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #D8D3C9;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 8px 14px;
}

/* ---------- Foco visível (navegação por teclado) ----------
   :focus-visible só aparece para quem navega por teclado — o clique de mouse
   não desenha o anel. Fica DEPOIS das regras de :hover para não ser sobrescrito
   e usa outline, que não é afetado pelos estilos inline dos componentes. */
body[data-variant="b"] a:focus-visible,
body[data-variant="b"] button:focus-visible,
body[data-variant="b"] summary:focus-visible,
body[data-variant="b"] .quiz-opt:focus-visible,
body[data-variant="b"] .quiz-input:focus-visible {
  outline: 3px solid #FFB700;
  outline-offset: 3px;
  border-radius: 12px;
}
/* Sobre fundo branco o dourado puro tem pouco contraste com o entorno claro:
   escurece o anel dentro dos blocos claros. */
body[data-variant="b"] .quiz-opt:focus-visible,
body[data-variant="b"] .quiz-input:focus-visible,
body[data-variant="b"] .faq-item summary:focus-visible {
  outline-color: #A67C0A;
}

/* ---------- Card do quiz: mais compacto que na variante A ----------
   min-height fixo porque o card agora está na dobra: sem ele a página inteira
   pula de altura a cada passo do diagnóstico. */
body[data-variant="b"] .quiz-shell {
  padding: 36px 34px !important;
  min-height: 520px !important;
  gap: 30px !important;
}
body[data-variant="b"] #quiz-card { gap: 26px !important; }
body[data-variant="b"] .quiz-opt { padding: 15px 18px !important; }

/* ---------- Seção do vídeo (saiu do hero) ---------- */
body[data-variant="b"] .video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 50px 110px -44px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,183,0,0.06);
}
body[data-variant="b"] #hero-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid rgba(255,183,0,0.4);
  background: rgba(10,10,9,0.55);
  color: #FFB700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
body[data-variant="b"] #hero-video-play:hover {
  background: rgba(10,10,9,0.75);
  transform: scale(1.06);
}

/* ---------- FAQ (acordeão nativo, sem JS) ---------- */
body[data-variant="b"] .faq-item {
  border-bottom: 1px solid rgba(14,12,8,0.09);
}
body[data-variant="b"] .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 22px 2px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: #0E0C08;
  transition: color 0.2s ease;
}
body[data-variant="b"] .faq-item summary::-webkit-details-marker { display: none; }
body[data-variant="b"] .faq-item summary:hover { color: #A67C0A; }
body[data-variant="b"] .faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid #FFB700;
  border-bottom: 2px solid #FFB700;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.25s ease;
}
body[data-variant="b"] .faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
body[data-variant="b"] .faq-item p {
  font-size: 15px;
  line-height: 1.75;
  color: #56514A;
  margin: 0 0 22px;
  max-width: 720px;
}

/* ---------- Barra fixa (só mobile) ---------- */
body[data-variant="b"] .stick-b {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: rgba(10,10,9,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: none;
  border-top: 1px solid rgba(255,183,0,0.28);
  color: #FFB700;
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

/* Não há mais bloco de tablet: o empilhamento de uma coluna já é o padrão em
   qualquer largura, então tablet e desktop só diferem no tamanho do tipo. */

/* ---------- Mobile: cada pixel acima da dobra conta ----------
   Alvo medido em 390x844: topo do card <= 330px e a opção 01 terminando
   antes de 540px, ou seja, enunciado + primeira resposta sempre visíveis. */
@media (max-width: 640px) {
  body[data-variant="b"] .hero-b { padding: 26px 22px 44px !important; }
  body[data-variant="b"] .hero-b-grid { gap: 26px; }
  body[data-variant="b"] .hero-b-badge {
    padding: 7px 15px;
    font-size: 10.5px;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
  }
  /* A headline tem 92 caracteres. A 32px ela ocupava 5 linhas e empurrava o
     formulário 130px para baixo — o texto é fixo, então quem cede é o corpo
     do tipo. A 27px cabe em 4 linhas, que é o teto aceitável. */
  body[data-variant="b"] .hero-b-h1 {
    font-size: clamp(23px, 7vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.8px;
    margin-bottom: 14px;
  }
  body[data-variant="b"] .hero-b-sub {
    font-size: 15.5px;
    line-height: 1.55;
    margin-bottom: 22px;
  }
  body[data-variant="b"] .sub-b { display: none; }        /* 2ª frase só no desktop */
  body[data-variant="b"] .hero-b-rule { display: none; }

  body[data-variant="b"] .quiz-shell {
    padding: 20px !important;
    min-height: 460px !important;
    gap: 18px !important;
  }
  body[data-variant="b"] #quiz-card { gap: 18px !important; }
  body[data-variant="b"] .quiz-opt { padding: 13px 14px !important; gap: 12px !important; }
  body[data-variant="b"] .quiz-opt > span:first-child { width: 30px !important; height: 30px !important; }
  body[data-variant="b"] .quiz-opt > span:nth-child(2) { font-size: 15px !important; }
  body[data-variant="b"] #quiz-card h3 { font-size: 19.5px !important; line-height: 1.25 !important; }
  /* O espaço entre o enunciado e as respostas vem de um gap inline gerado pelo
     main.js (28px). Só dá para alcançá-lo pelo elemento que o carrega — daí o
     :has(). Navegador sem suporte simplesmente ignora e fica com os 28px. */
  body[data-variant="b"] #quiz-card > div:has(> h3) { gap: 18px !important; }

  body[data-variant="b"] .stick-b.is-on { display: flex; }
  /* espaço para a barra fixa não cobrir o link da política */
  body[data-variant="b"] footer { padding-bottom: 96px !important; }

  /* ---------- Densidade no mobile ----------
     O respiro generoso do desktop vira rolagem morta no celular: são oito
     seções, e cada par de paddings de ~90px custa quase uma tela inteira de
     scroll. Aqui o ritmo é comprimido só abaixo de 640px — o desktop mantém
     os espaços originais. */
  body[data-variant="b"] main section:not(.hero-b) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  body[data-variant="b"] main section[aria-label="Credenciais"] {
    padding-top: 0 !important;
    padding-bottom: 40px !important;
  }
  body[data-variant="b"] main section[aria-label="O efeito da decisão sobre o seu caixa"] {
    padding-top: 0 !important;
  }
  body[data-variant="b"] main section[aria-label="Perguntas frequentes"] {
    padding-top: 0 !important;
  }
  /* Cards: menos moldura, mesmo conteúdo. */
  body[data-variant="b"] .card-lift,
  body[data-variant="b"] .card-lift-dark { padding: 26px 22px !important; gap: 12px !important; }
  body[data-variant="b"] main section h2 { line-height: 1.14 !important; }

  /* Retrato do Brunno: 300x380 ocupa meia tela de celular sem acrescentar
     informação. Proporção preservada. */
  body[data-variant="b"] main section[aria-label="Quem analisa os seus números"] > div > div:first-child {
    width: 216px !important;
    height: 274px !important;
  }
  body[data-variant="b"] main section[aria-label="Quem analisa os seus números"] > div {
    gap: 32px !important;
  }
  /* Os três indicadores aparecem duas vezes na página: na faixa de
     credibilidade e aqui. No celular viram uma linha só — mesma informação,
     um terço da altura. */
  body[data-variant="b"] main section[aria-label="Quem analisa os seus números"] [style*="repeat(auto-fit, minmax(120px"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 18px !important;
    border-top: 2px solid #FFB700;
    padding-top: 12px;
  }
  body[data-variant="b"] main section[aria-label="Quem analisa os seus números"] [style*="repeat(auto-fit, minmax(120px"] > div {
    border-top: none !important;
    padding-top: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 5px;
  }
  body[data-variant="b"] main section[aria-label="Quem analisa os seus números"] [style*="repeat(auto-fit, minmax(120px"] > div > div:first-child {
    font-size: 17px !important;
  }
  body[data-variant="b"] main section[aria-label="Quem analisa os seus números"] [style*="repeat(auto-fit, minmax(120px"] > div > div:last-child {
    font-size: 12px !important;
    margin-top: 0 !important;
  }

  /* FAQ: oito perguntas fechadas somam quase uma tela inteira só de molduras. */
  body[data-variant="b"] .faq-item summary {
    padding: 16px 2px !important;
    font-size: 15.5px !important;
  }
  body[data-variant="b"] .faq-item p { font-size: 14.5px !important; margin-bottom: 16px !important; }

  /* Cards da seção consolidada: sem o quadradinho de ícone, que no celular só
     acrescenta altura. */
  body[data-variant="b"] main section[aria-label="O efeito da decisão sobre o seu caixa"] [style*="border-radius: 16px"] > span:first-child {
    display: none !important;
  }
  body[data-variant="b"] main section[aria-label="O efeito da decisão sobre o seu caixa"] [style*="border-radius: 16px"] {
    padding: 20px 20px !important;
    gap: 8px !important;
  }

  /* Títulos de seção um pouco menores no celular: 30px em 390px de largura
     quebra em quatro linhas. */
  body[data-variant="b"] main section h2 { font-size: clamp(25px, 6.6vw, 32px) !important; }

  /* Espaço entre os blocos internos de cada seção. No desktop 40-46px dá o
     respiro premium; no celular são só linhas de rolagem vazias. */
  body[data-variant="b"] main section:not(.hero-b) > div { gap: 26px !important; }
}

/* A barra fixa é um recurso de mobile: some de vez acima de 640px, mesmo com
   a classe .is-on que o script inline da página aplica. */
@media (min-width: 641px) {
  body[data-variant="b"] .stick-b { display: none !important; }
}