:root {
  --hf-green-dark:  #0d2b1e;
  --hf-green:       #143d28;
  --hf-green-mid:   #1a4a32;
  --hf-yellow:      #d4a520;
  --hf-white:       #ffffff;
  --hf-error:       #ff6b6b;
  --hf-radius:      4px;
  --hf-font-title:  'Arial Black', 'Impact', Arial, sans-serif;
  --hf-font-body:   Arial, 'Helvetica Neue', sans-serif;
}

.hfnews-album *, .hfnews-album *::before, .hfnews-album *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

.hfnews-album {
  background: var(--hf-green-dark);
  color: var(--hf-white);
  overflow: hidden;
  font-family: var(--hf-font-body);
}

.hfnews-step        { display: none; }
.hfnews-step--active { display: block; }

.hfnews-split {
  display: flex;
  min-height: 600px;
}

.hfnews-split__left {
  background: var(--hf-green-dark);
  width: 41%;
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

@keyframes hf-rays-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

#hfnews-sucesso .hfnews-split__left {
  position: relative;
  overflow: hidden;
  background:
    /* glow verde central */
    radial-gradient(ellipse 70% 65% at 50% 52%,
      rgba(72, 255, 90, 0.52)  0%,
      rgba(40, 200, 60, 0.30) 38%,
      rgba(18, 90, 35, 0.15)  62%,
      transparent             80%),
    /* faíscas douradas */
    radial-gradient(circle 2px   at 22% 18%, rgba(212,165,32,0.90) 0%, transparent 80%),
    radial-gradient(circle 1.5px at 78% 16%, rgba(212,165,32,0.70) 0%, transparent 80%),
    radial-gradient(circle 3px   at 13% 68%, rgba(212,165,32,0.60) 0%, transparent 80%),
    radial-gradient(circle 1.5px at 86% 74%, rgba(212,165,32,0.80) 0%, transparent 80%),
    radial-gradient(circle 2px   at 63% 10%, rgba(212,165,32,0.70) 0%, transparent 80%),
    radial-gradient(circle 1px   at 28% 83%, rgba(212,165,32,0.60) 0%, transparent 80%),
    radial-gradient(circle 2.5px at 90% 43%, rgba(212,165,32,0.50) 0%, transparent 80%),
    radial-gradient(circle 1px   at 10% 40%, rgba(212,165,32,0.70) 0%, transparent 80%),
    radial-gradient(circle 2px   at 50% 89%, rgba(212,165,32,0.55) 0%, transparent 80%),
    radial-gradient(circle 1.5px at 40% 6%,  rgba(212,165,32,0.65) 0%, transparent 80%),
    var(--hf-green-dark);
}

/* raios girando por trás */
#hfnews-sucesso .hfnews-split__left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(72, 220, 80, 0.06) 0deg 8deg,
    transparent             8deg 18deg
  );
  pointer-events: none;
  z-index: 0;
  animation: hf-rays-rotate 28s linear infinite;
}

#hfnews-sucesso .hfnews-split__left > * {
  position: relative;
  z-index: 1;
}

.hfnews-split__right {
  background: var(--hf-green);
  flex: 1;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.hfnews-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hf-yellow);
  color: var(--hf-green-dark);
  font-family: var(--hf-font-title);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: var(--hf-radius);
  text-transform: uppercase;
  width: fit-content;
  line-height: 1;
}

.hfnews-badge--outline {
  background: transparent;
  border: 2px solid var(--hf-yellow);
  color: var(--hf-yellow);
}

.hfnews-title {
  font-family: var(--hf-font-title);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--hf-white);
}

.hfnews-title--highlight { color: var(--hf-yellow); }
.hfnews-title--sucesso   { font-size: clamp(2rem, 4vw, 3.5rem); }

.hfnews-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--hf-white);
  max-width: 480px;
}

.hfnews-highlight { color: var(--hf-yellow); font-weight: 700; }

.hfnews-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  font-family: var(--hf-font-title);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid var(--hf-yellow);
  border-radius: var(--hf-radius);
  transition: opacity 0.18s;
  text-decoration: none;
  line-height: 1;
}

.hfnews-btn:hover:not(:disabled) { opacity: 0.82; }
.hfnews-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hfnews-btn--primary { background: var(--hf-yellow); color: var(--hf-green-dark); }
.hfnews-btn--outline { background: transparent; color: var(--hf-yellow); }

.hfnews-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.hfnews-field { display: flex; flex-direction: column; gap: 6px; }

.hfnews-label {
  font-family: var(--hf-font-title);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--hf-yellow);
  text-transform: uppercase;
}

.hfnews-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(212, 165, 32, 0.6);
  color: var(--hf-white);
  font-family: var(--hf-font-body);
  font-size: 16px;
  padding: 10px 0;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.hfnews-input:focus         { border-color: var(--hf-white); }
.hfnews-input::placeholder  { color: rgba(255, 255, 255, 0.28); }

.hfnews-error {
  color: var(--hf-error);
  font-size: 14px;
  font-family: var(--hf-font-body);
  margin-top: 4px;
}

.hfnews-codigo-inputs {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.hfnews-codigo-input {
  width: 72px;
  height: 96px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--hf-yellow);
  border-radius: var(--hf-radius);
  color: var(--hf-white);
  font-family: var(--hf-font-title);
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  caret-color: var(--hf-yellow);
  transition: border-color 0.18s, background 0.18s;
}

.hfnews-codigo-input:focus {
  border-color: var(--hf-white);
  background: rgba(255, 255, 255, 0.08);
}

.hfnews-figurinhas-preview {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hfnews-card {
  position: absolute;
  width: 190px;
  height: 265px;
  background: var(--hf-green-mid);
  border: 1px solid rgba(212, 165, 32, 0.25);
  border-radius: 8px;
  padding: 14px;
  color: var(--hf-yellow);
  font-family: var(--hf-font-title);
  font-size: 12px;
  font-weight: 900;
}

.hfnews-card--001 { z-index: 3; transform: rotate(2deg); }
.hfnews-card--002 { z-index: 2; transform: rotate(-4deg) translate(-22px, 12px); }
.hfnews-card--003 { z-index: 1; transform: rotate(-8deg) translate(-44px, 24px); }

@keyframes hf-shine-sweep {
  0%   { transform: translateX(-220%) skewX(-18deg); }
  100% { transform: translateX(320%)  skewX(-18deg); }
}

.hfnews-figurinha-card {
  position: relative;
  background: var(--hf-green-mid);
  border: 2px solid var(--hf-yellow);
  border-radius: 8px;
  overflow: hidden;
  max-width: 260px;
  margin: 0 auto;
  box-shadow:
    0 0 32px rgba(72, 255, 90, 0.35),
    0 0 70px rgba(50, 200, 70, 0.18);
}

#hfnews-sucesso .hfnews-figurinha-card::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 55%;
  background: linear-gradient(
    to right,
    transparent                    0%,
    rgba(212, 165, 32, 0.12)      30%,
    rgba(255, 225, 80,  0.88)     50%,
    rgba(212, 165, 32, 0.12)      70%,
    transparent                   100%
  );
  animation: hf-shine-sweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s 1 both;
  pointer-events: none;
  z-index: 10;
}

.hfnews-figurinha-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.hfnews-figurinha-card__nome {
  padding: 12px 16px;
  font-family: var(--hf-font-title);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--hf-yellow);
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .hfnews-split { flex-direction: column; min-height: auto; }
  .hfnews-split__left { width: 100%; padding: 40px 24px; gap: 20px; }
  .hfnews-split__right { padding: 36px 24px; gap: 20px; }
  .hfnews-figurinhas-preview { height: 200px; }
  .hfnews-card { width: 110px; height: 155px; }
  .hfnews-codigo-inputs { gap: 6px; }
  .hfnews-codigo-input { width: calc((100% - 30px) / 6); height: 68px; font-size: 1.4rem; }
  .hfnews-actions { flex-direction: column; }
  .hfnews-btn { width: 100%; }
  .hfnews-figurinha-card { max-width: 200px; }
  .hfnews-figurinha-card img { height: 200px; }
}