html { scroll-behavior: smooth; }
body { background-color: #FBFAF6; }

.step-enter { animation: stepIn .38s cubic-bezier(.22,.8,.28,1) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-exit { animation: stepOut .22s ease both; }
@keyframes stepOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.opt-card { transition: border-color .15s ease, background-color .15s ease, transform .1s ease; }
.opt-card:hover { border-color: #1F4D36; background-color: #F3F1E9; }
.opt-card:active { transform: scale(.99); }
.opt-card.selected { border-color: #1F4D36; background-color: #E7EEE9; }

.grade-card { transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.grade-card:hover { border-color: #1F4D36; }
.grade-card:active { transform: scale(.98); }
.grade-card.selected { border-color: #1F4D36; box-shadow: 0 0 0 1px #1F4D36 inset; background-color: #E7EEE9; }

input[type="text"]:focus, input[type="tel"]:focus { outline: none; border-color: #1F4D36; box-shadow: 0 0 0 3px rgba(31,77,54,0.12); }

.progress-fill { transition: width .4s cubic-bezier(.22,.8,.28,1); }

::selection { background: #E7EEE9; }

.gauge-fill { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .step-enter, .step-exit { animation: none !important; }
  .gauge-fill { transition: none !important; }
}

/* No seu arquivo CSS */
.texto-img {
  max-width: 80px; /* Ajuste esse valor para deixar maior ou menor */
  height: auto;     /* Mantém a proporção da imagem correta */
}

/* ---------- Back button ---------- */
.back-btn { -webkit-tap-highlight-color: transparent; }
.back-btn.is-hidden { visibility: hidden; pointer-events: none; }

/* ---------- Welcome comparison cards ---------- */
.compare-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.compare-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(23,31,26,.18); border-color: #C9CFC8; }
.compare-card img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Processing / analysis screen ---------- */
.proc-ring-wrap { position: relative; width: 168px; height: 168px; margin: 0 auto; }
.proc-ring-glow {
  position: absolute; inset: -18px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(31,77,54,.16) 0%, rgba(31,77,54,0) 68%);
  animation: procGlow 2.2s ease-in-out infinite;
}
@keyframes procGlow {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.proc-ring-track { stroke: #E7EEE9; }
.proc-ring-fill {
  stroke: #1F4D36;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: stroke-dashoffset .35s linear;
}
.proc-pct {
  font-family: 'Fraunces', serif; font-size: 30px; fill: #171F1A;
}
.proc-particle {
  position: absolute; border-radius: 9999px; background: #AD8A3D; opacity: 0;
  animation: procParticle 2.6s ease-in-out infinite;
}
@keyframes procParticle {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  30%  { opacity: .8; }
  70%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-38px) scale(1); }
}
.proc-msg { transition: opacity .28s ease, transform .28s ease; }
.proc-msg.leaving { opacity: 0; transform: translateY(-6px); }
.proc-msg.entering { opacity: 0; transform: translateY(6px); }
.proc-dot { transition: background-color .25s ease, transform .25s ease; }
.proc-dot.active { background-color: #1F4D36; transform: scale(1.25); }
.proc-dot.done { background-color: #1F4D36; }

/* ---------- Result reveal ---------- */
.result-reveal { animation: resultReveal .5s cubic-bezier(.22,.8,.28,1) both; }
@keyframes resultReveal {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Beige simulation CTA ---------- */
.cta-beige {
  background-color: #DCC48E;
  color: #5C4A22;
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.cta-beige:hover { background-color: #E9D9AF; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(173,138,61,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(173,138,61,0); }
}

@media (prefers-reduced-motion: reduce) {
  .proc-ring-glow, .proc-particle, .cta-beige, .result-reveal, .compare-card { animation: none !important; }
  .compare-card:hover { transform: none; }
}

/* ---------- Checkbox & Radio UI (dentro dos cards) ---------- */
.opt-card .ui-box, .opt-card .ui-radio { 
  border-color: #C9CFC8; 
  background-color: #FFF; 
}
.opt-card.selected .ui-box, .opt-card.selected .ui-radio { 
  border-color: #1F4D36; 
}
.opt-card.selected .ui-box { 
  background-color: #1F4D36; 
}
.opt-card .ui-box svg, .opt-card .ui-radio .ui-dot { 
  opacity: 0; 
}
.opt-card.selected .ui-box svg, .opt-card.selected .ui-radio .ui-dot { 
  opacity: 1; 
}
.opt-card.selected .ui-radio .ui-dot { 
  background-color: #1F4D36; 
}