body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(160deg, #141829, #1f2240);
  overflow-x: hidden;
  color: #fff;
}

.background-elements {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.moon {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #fffdf5, #d4d2c5);
  border-radius: 50%;
  box-shadow: inset -8px -8px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.moon::before, .moon::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

.moon::before { width: 12px; height: 12px; top: 30px; left: 40px; }
.moon::after { width: 8px; height: 8px; top: 60px; left: 20px; }

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  animation: moveClouds 60s linear infinite;
  filter: blur(10px);
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.cloud::before { width: 100px; height: 100px; top: -30px; left: 30px; }
.cloud::after { width: 120px; height: 80px; top: 10px; left: 90px; }

.cloud1 { width: 180px; height: 80px; top: 120px; left: -300px; animation-delay: 0s; }
.cloud2 { width: 200px; height: 90px; top: 200px; left: -400px; animation-delay: 10s; }
.cloud3 { width: 150px; height: 70px; top: 80px; left: -350px; animation-delay: 20s; }
.cloud4 { width: 170px; height: 85px; top: 180px; left: -320px; animation-delay: 30s; }
.cloud5 { width: 160px; height: 75px; top: 140px; left: -330px; animation-delay: 40s; }

@keyframes moveClouds {
  from { left: -400px; }
  to { left: 110%; }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 2s infinite ease-in-out alternate;
}

@keyframes twinkle {
  from { transform: scale(1); opacity: 0.5; }
  to { transform: scale(1.8); opacity: 1; }
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow: 0 0 6px 2px white;
  transform: rotate(45deg);
  opacity: 0;
  animation: shooting 1.2s ease-out forwards;
}

@keyframes shooting {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: 1; }
  100% { transform: translate(300px, 300px) scale(0.5); opacity: 0; }
}

.container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: auto;
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  text-align: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.step { display: none; }

.step.active {
  display: block;
  animation: stepFadeIn 0.5s ease-out forwards;
}
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

h1, h2 {
  font-size: 32px;
  color: #ffd86b;
  margin-bottom: 20px;
  font-weight: 700;
}

#step-final-journey h2 {
    position: relative; 
    z-index: 1; 
}

p {
  font-size: 18px;
  line-height: 1.7;
  color: #eaeaea;
  margin-bottom: 16px;
}

strong { color: #ffdd88; }

.final-pitch-list {
    text-align: left;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 30px;
}

.final-pitch-list li {
    margin-bottom: 10px;
    font-size: 18px;
}

button {
  background: #00c67c;
  color: white;
  border: none;
  padding: 16px 36px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  transition: background 0.3s ease;
}

button:hover:not(:disabled) { background: #00a66a; }
button:disabled { background: #555; cursor: not-allowed; }

.btn-final-cta {
    padding: 20px 40px;
    font-size: 22px;
    font-weight: 700;
    background: #f5a623;
    animation: pulse 2s infinite;
}

.btn-final-cta:hover {
    background: #f7b94c;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 24px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%; 
  background: #00c67c;
  transition: width 0.4s ease-in-out;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.option {
  background-color: rgba(255, 255, 255, 0.08);
  padding: 14px 20px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.2s ease;
  font-size: 16px;
}

.option:hover { background-color: rgba(255, 255, 255, 0.12); }

.option.selected {
  background-color: #00c67c;
  color: white;
  border-color: #00a66a;
}

.option:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.option.multi-select { display: flex; align-items: center; justify-content: space-between; text-align: left;}
.option.multi-select::after {
    content: ''; width: 22px; height: 22px; border: 2px solid #aaa; border-radius: 4px; display: block; transition: 0.2s;
}
.option.multi-select.selected::after {
    background-color: #fff; border-color: #fff; content: '✔'; color: #00c67c; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 16px;
}

.slider-wrapper-box { margin: 40px 0; }
.range-display { font-size: 60px; color: #ffd86b; font-weight: bold; display: block; margin-bottom: 15px; }
.custom-slider { -webkit-appearance: none; width: 100%; height: 10px; background: rgba(0,0,0,0.3); border-radius: 5px; outline: none; }
.custom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; background: #00c67c; border-radius: 50%; cursor: pointer; border: 3px solid #fff; }
.slider-labels { display: flex; justify-content: space-between; margin-top: 15px; color: #ccc; font-size: 14px; font-weight: 600; }

.multi-slider-box { text-align: left; display: flex; flex-direction: column; gap: 25px; margin-bottom: 30px; margin-top: 20px; }
.mini-slider-item label { font-size: 16px; color: #eee; margin-bottom: 10px; display: block; font-weight: 500; }
.mini-slider-row { display: flex; align-items: center; gap: 15px; }
.mini-slider-row input[type=range] { flex-grow: 1; -webkit-appearance: none; height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; outline: none; }
.mini-slider-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #00c67c; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); }
.mini-slider-value { font-size: 20px; font-weight: bold; color: #ffd86b; width: 35px; text-align: center; }

.btn-group {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.btn-group .btn-prev {
  flex: 1;
  max-width: 100px; 
}

.btn-group .btn-next {
  flex: 1;
  max-width: 200px;
}

.btn-prev button, .btn-next {
  width: 100%;
  border-radius: 8px;
}

.btn-prev button {
  background: #ccc;
  color: #222;
  font-weight: 700;
  font-size: 16px; 
  padding: 10px 0;
}

.btn-next {
  padding: 14px 0;
  font-size: 18px;
}

.btn-prev button:hover:not(:disabled) { background: #bbb; }

.user-data-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 25px 0;
    align-items: end;
}

.user-data-form .full-width {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

input[type="text"],
input[type="number"] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #555;
    background: rgba(0,0,0,0.2);
    color: white;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

#userName {
    width: 60%;
    font-weight: bold;
}
#userAge {
    width: 30%;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

.gender-selector {
    display: flex;
    gap: 15px;
}
.gender-option {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #555;
    background: rgba(0,0,0,0.2);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s ease;
}
.gender-option .symbol { font-size: 20px; }
.gender-option.selected {
  background-color: #00c67c;
  color: white;
  border-color: #00a66a;
}

.input-slider-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.input-slider-group label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
}
.input-slider-group input[type="number"] {
    width: 100px;
    margin-bottom: 5px;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00c67c;
    border-radius: 50%;
    cursor: pointer;
}

#imc-result {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 600;
    min-height: 27px;
}
#imc-result .success { color: #00c67c; }
#imc-result .error { color: #ff6b6b; }
#imc-result p {
    font-size: 15px;
    color: #ccc;
    line-height: 1.5;
    margin-top: 10px;
    font-weight: 400;
}

#step-interval-1 p {
    min-height: 145px;
    text-align: center;
    display: inline-block;
    max-width: 90%;
}
.pulsating-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.pulsating-dots.visible { opacity: 1; }
.pulsating-dots div {
    width: 12px;
    height: 12px;
    background-color: #ffd86b;
    border-radius: 50%;
    animation: pulse-dot 1.4s infinite ease-in-out both;
}
.pulsating-dots div:nth-child(1) { animation-delay: -0.32s; }
.pulsating-dots div:nth-child(2) { animation-delay: -0.16s; }

@keyframes pulse-dot {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

#step-1 .btn-group { justify-content: center; }
#step-1 .btn-prev { display: none; }

.chart-container {
    width: 100%;
    height: 280px;
    padding: 40px 0px 40px 0px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    box-sizing: border-box;
}
.bar {
    width: 35px;
    height: 0;
    background-color: #00c67c;
    border-radius: 5px 5px 0 0;
    transition: height 1.5s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    text-align: center;
}
.bar span {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    color: #eaeaea;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.analysis-layout {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 10px;
  margin-top: 25px;
}
.split-chart-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}
.divider-line {
    width: 2px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.8);
    align-self: center;
}
.problems-chart .bar { background-color: #ff6b6b; }

.bar .percentage {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s ease 0.8s;
}
.motivational-text {
    margin-top: 30px;
    font-size: 16px;
    color: #c0c0c0;
    font-style: italic;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInReveal 1s ease 1.8s forwards;
}
@keyframes fadeInReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bar.highlight {
  transform: scaleY(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

.journey-container {
    position: relative;
    height: 380px; 
    width: 100%;
    margin-top: -30px; 
}

.journey-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.journey-segment {
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

#segment1to2 { stroke: #ff6b6b; filter: drop-shadow(0 0 1px #ff6b6b); } 
#segment2to3 { stroke: #f5a623; filter: drop-shadow(0 0 2px #f5a623); } 
#segment3to4 { stroke: #fff;     filter: drop-shadow(0 0 3px #fff); } 
#segment4to5 { stroke: #00c67c; filter: drop-shadow(0 0 4px #00c67c); } 

.milestone-svg { opacity: 0; }
.start-point .milestone-box-svg { fill: #ff6b6b; }
.mid-point .milestone-box-svg { fill: #fff; }
.end-point .milestone-box-svg { fill: #00c67c; }

.projection-line-svg {
    stroke-width: 0.5;
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
}

.projection-label-svg {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5px;
    font-weight: 600;
    fill: #ddd;
    text-anchor: middle;
    opacity: 0;
}

.start-point .projection-line-svg { stroke: #ff6b6b; }
.start-point .projection-label-svg { fill: #ff6b6b; }
.mid-point .projection-line-svg { stroke: #fff; }
.end-point .projection-line-svg { stroke: #00c67c; }
.end-point .projection-label-svg { fill: #00c67c; }

.axis-line {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 0.5;
    opacity: 0;
}

.grid-line {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 0.25;
    stroke-dasharray: 2 2;
    opacity: 0;
}

.axis-label {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5px;
    fill: rgba(255, 255, 255, 0.4);
    text-anchor: middle;
    opacity: 0;
}

.marker-line {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 0.25;
    stroke-dasharray: 1 1;
    opacity: 0;
}

.journey-container.animate .grid-line,
.journey-container.animate .axis-label,
.journey-container.animate .axis-line {
    animation: fade-in 0.5s 0.2s forwards;
}
.milestone-svg.visible { animation: fade-in 0.5s forwards; }
.milestone-svg.visible .projection-line-svg,
.milestone-svg.visible .marker-line {
    animation: draw-svg-line 0.5s forwards 0.3s;
}
.milestone-svg.visible .projection-label-svg { animation: fade-in 0.5s forwards 0.8s; }
.journey-segment.animate { animation: draw-svg-line 1s ease-in-out forwards; }
.milestone-box-svg.blink { animation: blink-light 0.5s ease-out; }

@keyframes fade-in { to { opacity: 1; } }
@keyframes draw-svg-line { to { stroke-dashoffset: 0; } }
@keyframes blink-light {
    0%, 100% { filter: drop-shadow(0 0 0px #fff); }
    50% { filter: drop-shadow(0 0 10px #fff); }
}

.mobile-journey { display: none; }

.journey-explanations {
    margin-top: 40px;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 25px;
}
.explanations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.explanation-item {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
}
.journey-explanations.visible .explanation-item {
    animation: slideUpFadeIn 0.6s ease-out forwards;
}
.explanation-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-start { background-color: #ff6b6b; box-shadow: 0 0 5px #ff6b6b; }
.dot-mid1 { background-color: #f5a623; box-shadow: 0 0 5px #f5a623; }
.dot-mid2 { background-color: #fff; box-shadow: 0 0 5px #fff; }
.dot-end { background-color: #00c67c; box-shadow: 0 0 5px #00c67c; }

.explanation-title strong {
    color: #ffd86b;
    font-weight: 600;
    font-size: 16px;
}
.explanation-item p {
    font-size: 14px;
    color: #cccccc;
    line-height: 1.6;
    margin: 0;
}

.journey-explanations.visible .explanation-item:nth-child(1) { animation-delay: 0.2s; }
.journey-explanations.visible .explanation-item:nth-child(2) { animation-delay: 0.4s; }
.journey-explanations.visible .explanation-item:nth-child(3) { animation-delay: 0.6s; }
.journey-explanations.visible .explanation-item:nth-child(4) { animation-delay: 0.8s; }
.journey-explanations.visible .explanation-item:nth-child(5) { animation-delay: 1.0s; }

@keyframes slideUpFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.interval-btn-group {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.interval-btn-group.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.interval-btn-group {
    justify-content: center;
}
.interval-btn-group .btn-prev {
    display: none; 
}

@media (max-width: 768px) {
    .split-chart-wrapper {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .split-chart-wrapper .divider-line {
        display: none !important;
    }
    .chart-container {
        height: 250px !important;
        width: 100% !important;
        padding: 20px 0 40px 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-around !important;
    }
    .bar {
        width: 12% !important;
        max-width: 40px !important;
    }
    .bar span {
        bottom: -50px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    
    .explanations-grid { grid-template-columns: 1fr; }
    .mobile-journey { display: none; }
}

/* --- INÍCIO DA ALTERAÇÃO (PASSO 9 - BOLAS COLORIDAS COM TEXTO DENTRO) --- */
.rating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    width: 100%;
}

.rating-item label {
    font-size: 16px;
    color: #eee;
    font-weight: 500;
    text-align: center;
    margin: 0;
}

.rating-circles-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.rating-circles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre as bolas reduzido para caber bem no celular */
}

button.circle {
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px;
    margin: 0;
    display: inline-block; 
    flex-shrink: 0;
    outline: none;
    
    /* Configuração para o texto dentro da bola */
    display: flex; 
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    word-break: break-word; /* Evita que palavras grandes quebrem a bola */
}

/* 1 - Azul Forte (Maior Esquerda - Não Incomoda) */
button.circle.opt-1 { 
    width: 72px; height: 72px; font-size: 14px; 
    border: 2px solid rgba(33, 150, 243, 0.4); 
}
button.circle.opt-1:hover { border-color: #2196F3; }
button.circle.opt-1.selected { 
    background-color: #2196F3; border-color: #2196F3; box-shadow: 0 0 12px rgba(33, 150, 243, 0.6); 
}

/* 2 - Azul Fraco (Média Esquerda - Penso, não me importo) */
button.circle.opt-2 { 
    width: 58px; height: 58px; font-size: 11px; 
    border: 2px solid rgba(100, 181, 246, 0.4); 
}
button.circle.opt-2:hover { border-color: #64B5F6; }
button.circle.opt-2.selected { 
    background-color: #64B5F6; border-color: #64B5F6; box-shadow: 0 0 12px rgba(100, 181, 246, 0.6); 
}

/* 3 - Cinza (Menor Centro - Neutro) */
button.circle.opt-3 { 
    width: 44px; height: 44px; font-size: 9px; 
    border: 2px solid rgba(158, 158, 158, 0.4); 
}
button.circle.opt-3:hover { border-color: #9E9E9E; }
button.circle.opt-3.selected { 
    background-color: #9E9E9E; border-color: #9E9E9E; box-shadow: 0 0 12px rgba(158, 158, 158, 0.6); 
}

/* 4 - Vermelho Fraco (Média Direita - Incomoda um pouco) */
button.circle.opt-4 { 
    width: 58px; height: 58px; font-size: 9px; 
    border: 2px solid rgba(229, 115, 115, 0.4); 
}
button.circle.opt-4:hover { border-color: #E57373; }
button.circle.opt-4.selected { 
    background-color: #E57373; border-color: #E57373; box-shadow: 0 0 12px rgba(229, 115, 115, 0.6); 
}

/* 5 - Vermelho Forte (Maior Direita - Incomoda muito) */
button.circle.opt-5 { 
    width: 72px; height: 72px; font-size: 14px; 
    border: 2px solid rgba(244, 67, 54, 0.4); 
}
button.circle.opt-5:hover { border-color: #F44336; }
button.circle.opt-5.selected { 
    background-color: #F44336; border-color: #F44336; box-shadow: 0 0 12px rgba(244, 67, 54, 0.6); 
}
/* --- FIM DA ALTERAÇÃO --- */