/* ═══ SERVICE TABS INTERFACE — Neobrutalist Edition ══════════════════════════════ */
/* Single source of truth — linked by en/ and pt/ gallery.html                     */

.svc-section-wrap { padding: 0 24px 80px; max-width: 1300px; margin: 0 auto; }
.svc-tabs-outer { display:flex; border: var(--na-border); box-shadow: 8px 8px 0 #0A0A0A; background: var(--na-bg); }

/* ── Tab Rail ── */
.svc-tab-rail { width: 320px; min-width: 320px; flex-shrink:0; border-right: var(--na-border); display:flex; flex-direction:column; }
.svc-tab-btn { display:flex; align-items:center; gap:14px; padding:20px 18px; background: var(--na-bg); border:none; border-bottom: var(--na-border); cursor:pointer; text-align:left; width:100%; transition: background 0.15s, color 0.15s; position:relative; }
.svc-tab-btn:last-child { border-bottom:none; }
.svc-tab-btn:hover:not(.is-active) { background: var(--na-bg-alt); }

/* Active tab — full black, high contrast neobrutalist signal */
.svc-tab-btn.is-active { background: #0A0A0A; border-left: 4px solid #B8FF00; padding-left: 14px; }
.svc-tab-btn.is-active .svc-tn { color: #ffffff; }
.svc-tab-btn.is-active .svc-tg { color: rgba(255,255,255,0.5); }
.svc-tab-btn.is-active .svc-arr { color: #B8FF00; transform: rotate(90deg); }

/* ── Icon bubble — flat, no gradients ── */
.svc-ti { width: 42px; height: 42px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; border: 2px solid #0A0A0A; }

/* ── Text ── */
.svc-tx { flex:1; min-width:0; }
.svc-tn { display:block; font-family: var(--na-font-display); font-size:14px; font-weight:700; color: var(--na-ink); line-height:1.2; letter-spacing:-0.01em; }
.svc-tg { display:block; font-family: var(--na-font-body); font-size:11px; color: var(--na-ink-2); margin-top:3px; line-height:1.3; }

/* ── Chevron ── */
.svc-arr { font-size:10px; color: #aaa; transition: transform 0.15s, color 0.15s; flex-shrink:0; }

/* ── Panels area ── */
.svc-panels-area { flex:1; position:relative; min-height: 520px; overflow:hidden; }
.svc-panel { display:none; padding: 52px 60px; animation: svcIn 0.22s ease; }
.svc-panel.is-active { display:block; }
@keyframes svcIn { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }

/* ── Panel header ── */
.svc-p-header { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.svc-p-badge { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; font-size:24px; border: var(--na-border); flex-shrink:0; }
.svc-p-eyebrow { font-family: var(--na-font-body); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color: var(--na-ink-2); }

/* ── Panel body ── */
.svc-panel h2 { font-family: var(--na-font-display) !important; font-size: clamp(1.9rem, 3vw, 2.6rem) !important; font-weight:800 !important; line-height:1.08 !important; color: var(--na-ink) !important; margin-bottom:16px !important; margin-top:10px !important; letter-spacing:-0.02em !important; }
.svc-panel p { font-family: var(--na-font-body); font-size:13.5px; color: var(--na-ink-2); line-height:1.85; margin-bottom:28px; max-width:640px; }

/* ── Feature list — 2-col grid ── */
.svc-p-features { list-style:none; padding:0; margin:0 0 32px; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; max-width:640px; }
.svc-p-features li { display:flex; align-items:flex-start; gap:9px; font-family: var(--na-font-body); font-size:12px; color: var(--na-ink); line-height:1.45; }
.svc-p-features .feat-check { width:18px; height:18px; background: var(--na-accent); border:2px solid #0A0A0A; display:flex; align-items:center; justify-content:center; font-size:9px; color: #0A0A0A; flex-shrink:0; margin-top:1px; }

/* ── Mobile ── */
@media(max-width: 767px) {
  .svc-tabs-outer { flex-direction:column; box-shadow: 4px 4px 0 #0A0A0A; }
  .svc-tab-rail { width:100%; min-width:0; border-right:none; display:grid; grid-template-columns:1fr 1fr; }
  .svc-tab-btn { border-right: var(--na-border); padding:12px 10px; }
  .svc-tab-btn:nth-child(even) { border-right:none; }
  .svc-tab-btn.is-active { border-left:4px solid #B8FF00; padding-left:6px; }
  .svc-tg, .svc-arr { display:none; }
  .svc-panels-area { min-height:auto; }
  .svc-panel.is-active { padding:28px 22px; }
  .svc-p-badge { width:44px; height:44px; font-size:19px; }
  .svc-p-features { grid-template-columns:1fr; max-width:100%; }
  .svc-panel p { max-width:100%; }
}