/* Componente: Seção "Sozinho ou com equipe" com diagramas animados em SVG/CSS */

.eq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.eq-card {
  background: var(--pro-card, #ffffff);
  border: 1px solid var(--pro-line, #d9e1df);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 28px rgba(24, 54, 43, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.eq-card-kicker {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft, rgba(69, 88, 216, 0.08));
  color: var(--primary, #4558d8);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.eq-stage {
  height: 210px;
  border-radius: 12px;
  background: var(--pro-soft, #edf2ef);
  border: 1px solid var(--pro-line, #d9e1df);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.eq-card h3 {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--pro-ink, #1c3437);
}

.eq-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pro-muted, #617173);
}

/* --- Diagrama 1: Sozinho (cartão se montando em sequência) --- */
.eq-solo-card {
  width: 100%;
  max-width: 252px;
  background: #ffffff;
  border: 1px solid #d0dad7;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(22, 50, 45, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eq-solo-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eq-solo-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(69, 88, 216, 0.14);
  border: 1.5px solid var(--primary, #4558d8);
  flex-shrink: 0;
}

.eq-solo-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.eq-solo-name {
  height: 9px;
  width: 78%;
  border-radius: 999px;
  background: #1c3437;
}

.eq-solo-area {
  height: 7px;
  width: 52%;
  border-radius: 999px;
  background: #9aa7a9;
}

.eq-solo-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.eq-solo-pill {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f4f6f5;
  border: 1px solid #d9e1df;
  font-size: 11px;
  font-weight: 600;
  color: #1c3437;
}

.eq-solo-wa {
  padding: 8px 10px;
  border-radius: 8px;
  background: #1f7a5c;
  color: #fcfdfb;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

.eq-section.is-in-view .eq-solo-head {
  animation: eqSoloStep1 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.eq-section.is-in-view .eq-solo-tags {
  animation: eqSoloStep2 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.eq-section.is-in-view .eq-solo-wa {
  animation: eqSoloStep3 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes eqSoloStep1 {
  0%, 6% { opacity: 0; transform: translateY(8px); }
  18%, 86% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes eqSoloStep2 {
  0%, 24% { opacity: 0; transform: translateY(8px); }
  38%, 86% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes eqSoloStep3 {
  0%, 44% { opacity: 0; transform: translateY(8px) scale(0.96); }
  58%, 86% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(6px) scale(0.96); }
}

/* --- Diagrama 2: Com equipe (espaço ligado à equipe + autorização individual) --- */
.eq-team-diagram {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eq-space-node {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--primary, #4558d8);
  color: #fcfdfb;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(69, 88, 216, 0.26);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eq-space-sub {
  font-weight: 500;
  font-size: 10.5px;
  opacity: 0.86;
}

.eq-tree-lines {
  width: 100%;
  height: 36px;
  display: block;
}

.eq-tree-path {
  fill: none;
  stroke: var(--primary, #4558d8);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 0;
}

.eq-tree-path.is-pending {
  stroke: #9aa7a9;
  stroke-dasharray: 4 4;
}

.eq-members-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.eq-member-node {
  background: #ffffff;
  border: 1px solid #d0dad7;
  border-radius: 9px;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  box-shadow: 0 6px 14px rgba(22, 50, 45, 0.06);
}

.eq-member-node.is-pending {
  background: rgba(255, 255, 255, 0.65);
  border-style: dashed;
}

.eq-member-name {
  font-size: 11px;
  font-weight: 700;
  color: #1c3437;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-member-link {
  font-size: 9.5px;
  color: #617173;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-auth-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  background: #e8f5ef;
  color: #1f7a5c;
  white-space: nowrap;
}

.eq-auth-pill.is-waiting {
  background: #edf2ef;
  color: #617173;
}

.eq-section.is-in-view .eq-tree-path:not(.is-pending) {
  animation: eqLineDraw 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.eq-section.is-in-view .eq-member-node:nth-child(1) .eq-auth-pill {
  animation: eqAuthPop1 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.eq-section.is-in-view .eq-member-node:nth-child(2) .eq-auth-pill {
  animation: eqAuthPop2 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.eq-section.is-in-view .eq-member-node:nth-child(3) {
  animation: eqPendingFade 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes eqLineDraw {
  0%, 10% { stroke-dashoffset: 120; }
  32%, 86% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 120; }
}

@keyframes eqAuthPop1 {
  0%, 28% { opacity: 0; transform: scale(0.84); }
  40%, 86% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.88); }
}

@keyframes eqAuthPop2 {
  0%, 40% { opacity: 0; transform: scale(0.84); }
  52%, 86% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.88); }
}

@keyframes eqPendingFade {
  0%, 48% { opacity: 0.45; }
  62%, 86% { opacity: 1; }
  96%, 100% { opacity: 0.45; }
}

/* Rodapé da seção */
.eq-footer {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.eq-health-note {
  margin: 0;
  font-size: 14px;
  color: var(--pro-muted, #617173);
}

.eq-health-note strong {
  color: var(--primary, #4558d8);
}

.eq-cta {
  background: var(--primary, #4558d8);
  color: #fcfdfb;
  border-color: var(--primary, #4558d8);
}

.eq-cta:hover {
  background: #3647b8;
  border-color: #3647b8;
}

@media (max-width: 860px) {
  .eq-grid {
    grid-template-columns: 1fr;
  }

  .eq-stage {
    height: 196px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eq-section.is-in-view .eq-solo-head,
  .eq-section.is-in-view .eq-solo-tags,
  .eq-section.is-in-view .eq-solo-wa,
  .eq-section.is-in-view .eq-tree-path:not(.is-pending),
  .eq-section.is-in-view .eq-member-node:nth-child(1) .eq-auth-pill,
  .eq-section.is-in-view .eq-member-node:nth-child(2) .eq-auth-pill,
  .eq-section.is-in-view .eq-member-node:nth-child(3) {
    animation: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}