/* ============================================================
   CONHEÇA O SISTEMA — Carousel Interativo (FlorExe)
   Vanilla, premium, responsivo. Cores herdadas da landing.
   ============================================================ */
#conheca { background: linear-gradient(180deg, #ffffff 0%, #faf6f3 100%); padding: 66px 0 74px; overflow: hidden; }
.sc { max-width: 1140px; margin: 0 auto; padding: 0 20px; text-align: center; }
.sc-badge { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); color: var(--pink); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 30px; letter-spacing: .4px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.sc h2 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; font-weight: 900; color: var(--g2); margin: 16px 0 10px; letter-spacing: -.5px; }
.sc h2 .pk { color: var(--pink); }
.sc .sc-sub { color: var(--muted); font-size: clamp(15px, 1.7vw, 17px); max-width: 620px; margin: 0 auto; }

/* ── Palco (setas + computador) ── */
.sc-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 34px auto 10px; max-width: 1040px; }
.sc-nav { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--g2); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.08); transition: transform .18s ease, background .18s ease, color .18s ease; }
.sc-nav:hover { background: var(--pink); color: #fff; border-color: var(--pink); transform: scale(1.08); }
.sc-nav:active { transform: scale(.96); }
.sc-nav svg { width: 22px; height: 22px; }

/* ── Computador ── */
.sc-device { position: relative; width: 100%; max-width: 880px; margin: 0 auto; --screen-top: 14%; --screen-left: 20.3%; --screen-width: 57%; --screen-height: 46.5%; touch-action: pan-y; cursor: grab; }
.sc-device:active { cursor: grabbing; }
.sc-frame { display: block; width: 100%; height: auto; position: relative; z-index: 1; pointer-events: none; user-select: none; }
.sc-screen { position: absolute; top: var(--screen-top); left: var(--screen-left); width: var(--screen-width); height: var(--screen-height); z-index: 2; overflow: hidden; background: #0c0c0f; border-radius: 2px; }
.sc-shot { position: absolute; inset: 0; background-size: cover; background-position: top center; background-repeat: no-repeat; opacity: 0; transform: scale(1.045); transition: opacity .5s ease, transform .6s ease; will-change: opacity, transform; }
.sc-shot.on { opacity: 1; transform: scale(1); }
.sc-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; background: linear-gradient(135deg, #1f7a52, #14352a); text-align: center; padding: 8%; }
.sc-fallback .fi { opacity: .9; }
.sc-fallback .fn { font-size: clamp(14px, 2.4vw, 22px); font-weight: 800; letter-spacing: .3px; }
.sc-fallback .fh { font-size: clamp(9px, 1.4vw, 12px); opacity: .7; text-transform: uppercase; letter-spacing: 1px; }

/* Card "E muito mais" (resumo dos outros módulos) */
.sc-more { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4%; padding: 5% 6.5%; background: radial-gradient(130% 130% at 50% 0%, #2b7d5f 0%, #14352a 78%); color: #fff; }
.sc-more-t { font-size: clamp(11px, 1.7vw, 17px); font-weight: 800; letter-spacing: .3px; }
.sc-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3% 4%; width: 100%; }
.sc-more-item { display: flex; align-items: center; gap: 3.5%; text-align: left; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 2.6% 3.4%; }
.sc-more-item svg { flex-shrink: 0; width: clamp(15px, 2vw, 22px); height: clamp(15px, 2vw, 22px); color: #f3b9d3; }
.sc-more-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sc-more-tx b { font-size: clamp(9px, 1.15vw, 13px); font-weight: 700; }
.sc-more-tx span { font-size: clamp(7px, .95vw, 11px); opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fallback SEM computer.png (mostra um monitor limpo) */
.sc-device.no-frame { max-width: 640px; background: #1f2937; border-radius: 16px; padding: 2.4%; box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.sc-device.no-frame .sc-frame { display: none; }
.sc-device.no-frame::after { content: ""; display: block; width: 120px; height: 12px; background: #1f2937; border-radius: 0 0 10px 10px; margin: 8px auto -30px; box-shadow: 0 30px 40px rgba(0,0,0,.2); }
.sc-device.no-frame .sc-screen { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 8px; }

/* ── Legenda (título + descrição do módulo) ── */
.sc-caption { max-width: 620px; margin: 22px auto 0; min-height: 92px; }
.sc-caption h3 { font-size: 24px; font-weight: 900; color: var(--g2); margin-bottom: 6px; }
.sc-caption p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.sc-caption.sc-in h3 { animation: scIn .45s ease both; }
.sc-caption.sc-in p { animation: scIn .45s ease .06s both; }
@keyframes scIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* nome do módulo anterior/próximo (peek nas setas) */
.sc-peek { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 8px; min-height: 14px; opacity: .8; }

/* ── Indicadores (dots) ── */
.sc-dots { display: flex; gap: 8px; justify-content: center; margin: 20px 0 6px; flex-wrap: wrap; }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d3cf; border: none; cursor: pointer; padding: 0; transition: all .3s ease; }
.sc-dot.on { width: 26px; border-radius: 6px; background: var(--pink); }

/* ── Ícones dos módulos ── */
.sc-icons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.sc-ico { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 76px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); cursor: pointer; transition: all .2s ease; }
.sc-ico svg { width: 20px; height: 20px; transition: transform .2s ease; }
.sc-ico .il { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.sc-ico:hover { border-color: var(--pink); color: var(--pink); }
.sc-ico.on { border-color: var(--pink); background: var(--pink); color: #fff; box-shadow: 0 8px 20px rgba(232,77,138,.28); transform: translateY(-2px); }
.sc-ico.on svg { transform: scale(1.14); }

/* ── Responsivo ── */
@media (max-width: 820px) {
  .sc h2 { font-size: 30px; }
  .sc-stage { grid-template-columns: 1fr; gap: 8px; }
  .sc-nav { position: absolute; top: 46%; z-index: 5; width: 42px; height: 42px; }
  .sc-nav.prev { left: 6px; }
  .sc-nav.next { right: 6px; }
  .sc-stage { position: relative; }
  .sc-device { max-width: 100%; }
  .sc-peek { display: none; }
  .sc-icons { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .sc-ico { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .sc h2 { font-size: 25px; }
  .sc .sc-sub { font-size: 14px; }
  .sc-caption h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-shot, .sc-caption.sc-in h3, .sc-caption.sc-in p, .sc-dot, .sc-ico { transition: none !important; animation: none !important; }
}