/* Resultado simples: uma leitura principal e tres passos claros */
.result-screen {
  width: min(100%, 590px);
  max-width: 100%;
  min-width: 0;
  padding-bottom: 28px;
}

.result-screen .analysis-brand {
  margin-bottom: 32px;
}

.result-heading {
  margin-bottom: 25px;
}

.result-heading .question-kicker {
  margin-bottom: 13px;
}

.result-heading h2 {
  max-width: 550px;
  font-size: clamp(29px, 5.5vw, 36px);
  line-height: 1.1;
}

.result-summary-card {
  overflow: hidden;
  color: #fff;
  border-radius: 22px;
  background: linear-gradient(145deg, #176f58, #188d6a);
  box-shadow: 0 18px 42px rgb(19 104 79 / 23%);
}

.result-summary-header {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 13px;
  align-items: center;
  padding: 21px 21px 17px;
}

.result-summary-header > div {
  display: flex;
  flex-direction: column;
}

.result-summary-header small {
  color: rgb(255 255 255 / 68%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.result-summary-header h3 {
  max-width: 430px;
  margin: 4px 0 0;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.summary-symbol {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgb(255 255 255 / 14%);
}

.summary-symbol::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

.summary-symbol::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 19px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #217b62;
}

.summary-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  margin: 0 10px;
  overflow: hidden;
  border-radius: 14px;
  background: rgb(255 255 255 / 15%);
}

.summary-metrics > div {
  display: flex;
  min-height: 69px;
  flex-direction: column;
  justify-content: center;
  padding: 13px 16px;
  background: rgb(255 255 255 / 9%);
}

.summary-metrics small {
  color: rgb(255 255 255 / 68%);
  font-size: 8px;
  text-transform: uppercase;
}

.summary-metrics strong {
  margin-top: 5px;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.simple-score {
  padding: 23px 21px 18px;
}

.simple-score .score-track {
  height: 7px;
  margin: 0 0 11px;
  background: linear-gradient(90deg, #f5ad99, #ffe2a3 52%, #bfe49d);
}

.simple-score .score-track i {
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  background: #ef745d;
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}

.simple-score .score-track i span {
  bottom: 20px;
  padding: 6px 8px;
  color: #176b55;
  font-size: 8px;
}

.simple-score footer {
  display: flex;
  justify-content: space-between;
  color: rgb(255 255 255 / 75%);
}

.simple-score footer span {
  font-size: 8px;
  font-weight: 600;
}

.section-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin: 0 auto 8px;
  color: #17785d;
  border-radius: 9px;
  background: #e5f3ee;
  font-size: 8px;
  font-weight: 800;
}

.result-section {
  margin-top: 34px;
}

.result-section h3 {
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: -.015em;
  text-transform: none;
}

.result-section p {
  max-width: 480px;
  color: #61656c;
  font-size: 12px;
  line-height: 1.65;
}

.diagnosis {
  position: relative;
  padding: 0 20px;
}

.meaning {
  padding: 22px;
  border-color: #e9e4e1;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgb(49 35 28 / 6%);
}

.meaning ul {
  gap: 8px;
}

.meaning li {
  min-height: 48px;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #f6e8e8;
  border-radius: 12px;
  background: #fff8f8;
  font-size: 11px;
}

.meaning li span {
  width: 24px;
  height: 24px;
  color: #d94d60;
  background: #ffe9ec;
}

.result-good-news {
  grid-template-columns: 38px 1fr;
  gap: 13px;
  margin-top: 15px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #edf9f5, #f8fdfa);
}

.result-good-news > span {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

.result-good-news h3 {
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: none;
}

.result-good-news p {
  max-width: 450px;
  font-size: 11px;
  line-height: 1.6;
}

.method-can {
  margin-top: 15px;
  padding: 22px;
  border-radius: 20px;
  background: #fbfaf9;
  text-align: center;
}

.method-can .section-number {
  margin-bottom: 8px;
}

.method-can > h3 {
  margin: 0 0 15px;
  font-size: 14px;
}

.method-can ul {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  text-align: left;
}

.method-can li {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: 10px 11px 10px 34px;
  border-color: #ece8e5;
  font-size: 10px;
}

.method-can li::before {
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: #fff;
  border-radius: 50%;
  background: #188464;
  font-size: 9px;
  line-height: 17px;
  text-align: center;
  transform: translateY(-50%);
}

.result-warning {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 15px;
  padding: 16px 18px;
  color: #604d31;
  border-color: #efdcb2;
  border-radius: 14px;
  background: #fff9ea;
}

.result-warning strong {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  color: #986f28;
  border-radius: 8px;
  background: #ffefc9;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
}

.result-warning span {
  flex: 1;
  font-size: 10px;
  line-height: 1.45;
}

.result-button {
  margin-top: 18px;
  min-height: 64px;
  font-size: 15px;
}

.result-disclaimer {
  margin-top: 12px;
}

@media (max-width: 480px) {
  .result-screen .analysis-brand { margin-bottom: 26px; }
  .result-heading h2 { font-size: 28px; }
  .result-summary-header { padding: 18px 17px 15px; }
  .result-summary-header h3 { font-size: 17px; }
  .summary-metrics { grid-template-columns: 1fr; }
  .summary-metrics > div { min-height: 57px; }
  .meaning, .method-can { padding: 18px 14px; }
  .method-can ul { grid-template-columns: 1fr; }
  .result-warning { align-items: flex-start; flex-direction: column; }
  .result-warning strong { width: fit-content; }
}

/* Segunda leitura visual: mais humana, curta e escaneavel */
.result-screen .analysis-brand { margin-bottom: 25px; text-align: center; }
.result-heading { margin-bottom: 20px; }
.result-heading h2 { max-width: 520px; font-size: clamp(28px, 5.2vw, 34px); }

.result-summary-card {
  color: #1b2522;
  border: 1px solid #d9e8e2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgb(39 69 59 / 10%);
}

.result-summary-header {
  padding: 19px 20px 17px;
  border-bottom: 1px solid #e5eeeb;
  background: linear-gradient(135deg, #edf8f4, #f8fcfa);
}

.result-summary-header small { color: #568174; }
.result-summary-header h3 { color: #193a31; font-size: 18px; }
.summary-symbol { background: #dcefe9; }
.summary-symbol::before { background: #188464; }
.summary-symbol::after { background: #edf8f4; }

.summary-metrics {
  gap: 10px;
  margin: 14px 16px 0;
  overflow: visible;
  background: transparent;
}

.summary-metrics > div {
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid #e6ece9;
  border-radius: 12px;
  background: #fafcfb;
}

.summary-metrics > div:first-child {
  border-color: #f0dedf;
  background: #fff8f8;
}

.summary-metrics small { color: #858e8a; }
.summary-metrics strong { color: #253b35; font-size: 13px; }
.summary-metrics > div:first-child strong { color: #bd4d5b; }

.simple-score {
  margin-top: 14px;
  padding: 24px 18px 16px;
  border-top: 1px solid #edf1ef;
  background: #fbfcfc;
}

.simple-score .score-track { background: linear-gradient(90deg, #ef8b82, #f4c86b 53%, #75bc72); }
.simple-score footer { color: #7a8682; }

.result-eyebrow {
  margin: 0 0 6px !important;
  color: #188464 !important;
  font-size: 8px !important;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1 !important;
  text-transform: uppercase;
}

.diagnosis {
  margin-top: 16px;
  padding: 18px 20px;
  text-align: left;
  border: 1px solid #f0e3dc;
  border-radius: 16px;
  background: #fffaf7;
}

.diagnosis h3 { margin-bottom: 7px; font-size: 15px; text-transform: none; }
.diagnosis p { max-width: none; margin: 0; font-size: 11px; line-height: 1.6; }

.meaning {
  margin-top: 16px;
  padding: 20px;
  text-align: left;
  border-radius: 18px;
}

.meaning h3 { margin-bottom: 14px; font-size: 16px; text-transform: none; }
.meaning ul { gap: 9px; }

.meaning li {
  min-height: 59px;
  grid-template-columns: 31px 1fr;
  padding: 10px 12px;
  background: #fff9f9;
}

.meaning li > span {
  width: 27px;
  height: 27px;
  color: #ca5360;
  background: #ffe9eb;
  font-size: 10px;
}

.meaning li > div { display: flex; flex-direction: column; }
.meaning li strong { color: #3e4248; font-size: 11px; }
.meaning li small { margin-top: 3px; color: #777a80; font-size: 9px; line-height: 1.4; }

.result-good-news {
  margin-top: 14px;
  padding: 18px 19px;
  border-radius: 16px;
}

.result-good-news h3 { color: #174f3f; font-size: 14px; }
.result-good-news p { color: #586660; font-size: 10px; }

.method-can {
  margin-top: 16px;
  padding: 20px;
  text-align: left;
  border-radius: 18px;
}

.method-can .result-eyebrow { text-align: left; }
.method-can > h3 { margin-bottom: 14px; font-size: 16px; }
.method-can li { min-height: 49px; }

.result-warning {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 13px;
}

.result-button { margin-top: 14px; }

@media (max-width: 480px) {
  .result-heading h2 { font-size: 27px; }
  .summary-metrics { grid-template-columns: 1fr; gap: 7px; margin-inline: 10px; }
  .summary-metrics > div { min-height: 55px; padding: 10px 12px; }
  .summary-metrics strong { font-size: 12px; }
  .diagnosis { padding: 16px; }
  .meaning, .method-can { padding: 17px 14px; }
  .method-can ul { grid-template-columns: 1fr; }
  .result-summary-header h3,
  .diagnosis p,
  .meaning li > div,
  .method-can li { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 390px) {
  .result-heading h2 { max-width: 350px; font-size: 25px; }
  .result-summary-header { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; }
  .summary-symbol { width: 40px; height: 40px; }
  .meaning h3, .method-can > h3 { font-size: 15px; }
}