/* ==========================================================================
   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; }
}