/* funcionalidades.css — tabs com tour autoplay (fundo branco) */

.fn { background: #fff; }
.fn__header { max-width: 680px; margin: 0 auto var(--sp-8); text-align: center; }
.fn__header .kicker { display: inline-block; }
.fn__header h2 { margin: var(--sp-3) 0 var(--sp-4); }
.fn__header p { color: var(--c-text-muted); font-size: var(--fs-18); line-height: 1.6; }

/* Layout: lista de funcionalidades à esquerda, palco à direita */
.fn__layout { display: grid; grid-template-columns: 330px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }

/* Tabs como lista vertical grande (17.5px / 580 — igual ao original) */
.fn__tabs { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.fn__tab {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--c-green-100);
  color: var(--c-text-muted);
  font-size: 17.5px;
  font-weight: var(--fw-semi);
  text-align: left;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.fn__tab-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--c-green-50);
  color: var(--c-green-2);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.fn__tab-icon i { font-size: 20px; }
.fn__tab-caret { margin-left: auto; font-size: 16px; color: var(--c-green-100); transition: color 0.35s, transform 0.35s var(--ease); }
.fn__tab:hover { border-color: var(--c-green-300, var(--c-green)); box-shadow: var(--sh-sm); color: var(--c-dark); }
.fn__tab[aria-selected="true"] {
  background: var(--c-green-25);
  border-color: var(--c-green);
  color: var(--c-dark);
  box-shadow: 0 8px 22px rgba(74, 158, 110, 0.14);
}
.fn__tab[aria-selected="true"] .fn__tab-icon { background: var(--c-green); color: #fff; }
.fn__tab[aria-selected="true"] .fn__tab-caret { color: var(--c-green); transform: translateX(3px); }
/* barrinha de progresso do autoplay */
.fn__tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
  background: var(--c-green); border-radius: 2px; transform-origin: left;
  animation: fn-progress 5s linear;
  opacity: 0.45;
}
@keyframes fn-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.fn__hint { font-size: var(--fs-13); color: var(--c-text-faint); margin-top: var(--sp-4); padding-left: 18px; }

/* Palco */
.fn__stage {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
  background: var(--c-green-25);
  border: 1px solid var(--c-green-100);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
}
.fn__panel { display: none; }
.fn__panel.is-active { display: block; animation: ba-in 0.45s var(--ease); }
.fn__panel-label { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-green-2); }
.fn__panel h3 { margin: 10px 0 12px; font-size: var(--fs-24); color: var(--c-dark); }
.fn__panel p { color: var(--c-text-muted); line-height: 1.6; }

.fn__visual { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--c-green-100); background: #fff; }
.fn__visual img { width: 100%; display: block; }

/* mini-mockups (tabs sem screenshot) */
.fn__mini { padding: 22px; background: #fff; }
.fn__agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fn__agenda-day { text-align: center; }
.fn__agenda-day b { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--c-text-soft); margin-bottom: 6px; text-transform: uppercase; }
.fn__agenda-slot { height: 34px; border-radius: 8px; background: var(--c-green-50); border: 1px solid var(--c-green-100); margin-bottom: 6px; }
.fn__agenda-slot.is-on { background: var(--c-green); border-color: var(--c-green); }
.fn__gov-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r); background: var(--c-green-25); border: 1px solid var(--c-green-100); margin-bottom: 8px; font-size: var(--fs-14); color: var(--c-text); }
.fn__gov-row i { color: var(--c-green); font-size: 18px; }
.fn__gov-row span { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--c-green-2); text-transform: uppercase; }

/* mini-mockup: avaliação */
.fn__aval-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: var(--fs-14); color: var(--c-text); }
.fn__aval-row + .fn__aval-row { border-top: 1px solid var(--c-green-100); }
.fn__chip { flex-shrink: 0; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-green); color: #fff; font-size: var(--fs-11); font-weight: var(--fw-semi); }
.fn__chip--low { background: var(--c-slate-200); color: var(--c-text-muted); }
.fn__aval-out { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px; border-radius: var(--r); background: var(--c-green-50); color: var(--c-green-2); font-size: var(--fs-14); font-weight: var(--fw-semi); }

/* mini-mockup: por especialidade */
.fn__esp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fn__esp-card { padding: 14px; border: 1px solid var(--c-green-100); border-radius: var(--r); background: var(--c-green-25); }
.fn__esp-card b { display: flex; align-items: center; gap: 7px; font-size: var(--fs-14); color: var(--c-dark); font-weight: var(--fw-semi); }
.fn__esp-card b i { color: var(--c-green); font-size: 16px; }
.fn__esp-card span { display: block; margin-top: 4px; font-size: var(--fs-12); color: var(--c-text-soft); }

/* mini-mockup: evolução */
.fn__evo-label { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-soft); margin-bottom: 10px; }
.fn__evo-track { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--c-green-50); overflow: visible; }
.fn__evo-track > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-green); }
.fn__evo-goal { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--c-dark); border-radius: 2px; }
.fn__evo-txt { margin-top: 12px; font-size: var(--fs-14); color: var(--c-text-muted); }
.fn__evo-txt strong { color: var(--c-green-2); font-weight: var(--fw-semi); }

/* 2ª parte: 3 cards fixos com telas reais */
.fn__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--sp-10); }
.fn__card {
  background: #fff;
  border: 1px solid var(--c-green-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.fn__card:hover { transform: translateY(-6px); border-color: var(--c-green); box-shadow: 0 18px 44px rgba(26, 58, 39, 0.12); }
.fn__card-img { aspect-ratio: 16 / 10; background: var(--c-slate-50); border-bottom: 1px solid var(--c-green-100); overflow: hidden; }
.fn__card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fn__card-body { padding: 20px 22px 24px; }
.fn__card-label { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-green-2); }
.fn__card h3 { margin: 8px 0; font-size: var(--fs-20); color: var(--c-dark); }
.fn__card p { color: var(--c-text-muted); font-size: var(--fs-14); line-height: 1.55; }

@media (max-width: 900px) {
  .fn__cards { grid-template-columns: 1fr; }
  .fn__esp { grid-template-columns: 1fr; }
  .fn__layout { grid-template-columns: 1fr; }
  .fn__tabs { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .fn__tab { font-size: var(--fs-15); padding: 11px 16px; border-left: 0; border-radius: var(--r-pill); background: var(--c-green-25); }
  .fn__tab[aria-selected="true"] { background: var(--c-green); color: #fff; }
  .fn__tab[aria-selected="true"] i { color: #fff; }
  .fn__tab[aria-selected="true"]::after { background: #fff; }
  .fn__hint { padding-left: 0; text-align: center; }
}