/* sections/02_problema.css */

/* =========================
   02 PROBLEMA
========================= */

.problem-section {
  width: 100%;
  max-width: none;
  padding: 110px 54px;
}

/* =========================
   TOP LAYOUT
========================= */

.problem-top {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 64px;
  align-items: center;
}

/* =========================
   VISUAL
========================= */

.problem-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.problem-visual img {
  width: 100%;
  max-width: 500px;
  object-fit: contain;
  filter: none;
}

/* =========================
   AI THINKING OVERLAY
========================= */

.ai-thinking-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.ai-thinking-user {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--accent);
  font-size: 1rem;
  box-shadow: 0 12px 26px rgba(40, 70, 95, .14);
  backdrop-filter: blur(10px);
}

.ai-thinking-bubble {
  width: 210px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(220, 230, 238, .78);
  border-radius: 20px 20px 20px 6px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 30px rgba(40, 70, 95, .13);
  backdrop-filter: blur(10px);
}

.ai-thinking-list {
  position: relative;
  min-height: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-thinking-list li {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: var(--accent);
  font-size: .74rem;
  font-weight: 760;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .65s ease, transform .65s ease;
}

.ai-thinking-list li.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   COPY
========================= */

.problem-copy {
  width: 100%;
}

.problem-copy h2 {
  max-width: 700px;
}

.problem-copy p {
  max-width: 740px;
}

.problem-copy p + p {
  margin-top: 15px;
}

/* =========================
   PROBLEM BOX
========================= */

.problem-box {
  width: 100%;
  margin-top: 54px;
  box-shadow: none;
}

.problem-box-title {
  margin-bottom: 22px;
  color: var(--accent);
  font-size: .95rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* =========================
   SYMPTOMS GRID
========================= */

.symptom-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.symptom-list li {
  position: relative;
  min-height: 198px;
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.22;
}

.symptom-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(231, 111, 36, .08);
  color: #e76f24;
  font-size: .88rem;
}

.symptom-title {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.15;
}

/* =========================
   IMPACT / SOLUTIONS
========================= */

.problem-impact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.impact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 92px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(32, 135, 93, .18);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 252, 249, .96));
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.25;
}

.impact-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(32, 135, 93, .10);
  color: #20875d;
  font-size: .9rem;
}

.impact-kicker {
  display: block;
  margin-bottom: 5px;
  color: #20875d;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* =========================
   TAGS
========================= */

.problem-tags {
  margin-top: 34px;
  justify-content: center;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1180px) {

  .symptom-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .problem-impact {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 980px) {

  .problem-section {
    padding: 88px 22px;
  }

  .problem-top {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .problem-visual {
    order: -1;
  }

  .problem-visual img {
    max-width: 420px;
  }

  .ai-thinking-card {
    right: 18px;
    bottom: 18px;
    transform: scale(.94);
    transform-origin: bottom right;
  }

  .symptom-list {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 640px) {

  .ai-thinking-card {
    right: 10px;
    bottom: 10px;
    transform: scale(.82);
    transform-origin: bottom right;
  }

  .ai-thinking-bubble {
    width: 190px;
  }

  .ai-thinking-list li {
    font-size: .7rem;
  }

  .symptom-list {
    grid-template-columns: 1fr;
  }

  .problem-impact {
    grid-template-columns: 1fr;
  }

  .symptom-list li {
    min-height: auto;
  }

  .impact-item {
    min-height: auto;
  }

}