/* =========================================================
   SERVIÇOS (2) — Página de teste / proposta de melhoria
   Namespace "sv2-" para não colidir com style.css principal.
   Reaproveita todas as variáveis (--gold, --blue, --gray...)
   já definidas em style.css.
========================================================= */

/* ===== PAGE HERO override (menos respiro antes do explorador) ===== */
.page-hero { padding-bottom: 8px !important; }
.sv2-explorer-section { padding-top: 8px !important; }

.sv2-intro-badge {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-head); font-size:12px; font-weight:600;
    letter-spacing:2px; text-transform:uppercase; color:var(--blue-light);
    padding:6px 16px; border:1px solid rgba(0,102,255,0.3); border-radius:100px;
    background:rgba(0,102,255,0.06); margin-bottom:20px;
}

/* ===== LAYOUT PRINCIPAL: sidebar + painel ===== */
.sv2-explorer { display:grid; grid-template-columns:360px 1fr; gap:32px; align-items:start; }

.sv2-list { position:sticky; top:calc(var(--header-h) + 24px); display:flex; flex-direction:column; gap:10px; }
.sv2-item {
    display:flex; align-items:center; gap:16px; padding:18px 20px;
    background:var(--gray); border:1px solid var(--border); border-radius:var(--radius-sm);
    cursor:pointer; transition:var(--transition); text-align:left; width:100%;
}
.sv2-item:hover { border-color:rgba(212,175,55,0.35); transform:translateX(4px); }
.sv2-item.active {
    background:linear-gradient(135deg,rgba(212,175,55,0.14),rgba(212,175,55,0.03));
    border-color:var(--gold);
}
.sv2-item-icon {
    flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
    background:rgba(0,102,255,0.1); border:1px solid rgba(0,102,255,0.2); border-radius:12px; color:var(--blue-light);
    font-size:22px;
}
.sv2-item.active .sv2-item-icon { background:rgba(212,175,55,0.14); border-color:rgba(212,175,55,0.3); color:var(--gold); }
.sv2-item-text { flex:1; min-width:0; }
.sv2-item-text strong { display:block; font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--white); }
.sv2-item-text span { font-size:13px; color:var(--text-muted); }
.sv2-item-price { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--gold); white-space:nowrap; }
.sv2-item-badge {
    font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
    color:var(--black); background:var(--gold); padding:2px 8px; border-radius:100px; margin-left:8px;
}

/* ===== PAINEL DE DETALHE ===== */
.sv2-panel {
    background:var(--gray); border:1px solid var(--border); border-radius:var(--radius);
    padding:40px; position:relative; overflow:hidden; scroll-margin-top: calc(var(--header-h) + 20px);
}
.sv2-panel::before {
    content:''; position:absolute; top:-40%; right:-10%; width:420px; height:420px;
    background:radial-gradient(circle, rgba(212,175,55,0.08), transparent 70%); pointer-events:none;
}
.sv2-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:4px; position:relative; z-index:1; flex-wrap:wrap; }
.sv2-panel-head > div:first-child { flex:1 1 auto; min-width:280px; }
.sv2-panel-tag { font-family:var(--font-head); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; display:block; }
.sv2-panel-title { font-family:var(--font-head); font-size:clamp(24px,3vw,34px); font-weight:800; color:var(--white); margin-bottom:8px; }
.sv2-panel-tagline { font-size:16px; color:var(--text-dim); max-width:none; line-height:1.5; }
.sv2-panel-meta { text-align:right; flex-shrink:0; }
.sv2-panel-meta .sv2-price { font-family:var(--font-head); font-size:28px; font-weight:900; color:var(--gold); }
.sv2-panel-meta .sv2-duration { font-size:13px; color:var(--text-muted); margin-top:2px; }

.sv2-divider { height:1px; background:var(--border); margin:18px 0; position:relative; z-index:1; }

.sv2-section-label {
    font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--white); margin-bottom:16px; display:flex; align-items:center; gap:10px; position:relative; z-index:1;
}
.sv2-section-label svg { color:var(--gold); flex-shrink:0; }

/* ===== PASSO A PASSO ===== */
.sv2-steps { display:flex; flex-direction:column; gap:0; position:relative; z-index:1; }
.sv2-step { display:grid; grid-template-columns:38px 1fr; gap:16px; padding:9px 0; position:relative; }
.sv2-step:not(:last-child)::after {
    content:''; position:absolute; left:18px; top:44px; bottom:-2px; width:2px;
    background:linear-gradient(180deg, var(--border), transparent);
}
.sv2-step-num {
    width:38px; height:38px; border-radius:50%; background:var(--dark); border:1.5px solid var(--gold);
    color:var(--gold); font-family:var(--font-head); font-weight:800; font-size:15px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1;
}
.sv2-step-title { font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--white); margin-bottom:3px; }
.sv2-step-desc { font-size:14.5px; color:var(--text-dim); line-height:1.55; }
.sv2-step-desc .sv2-product-tag {
    display:inline-flex; align-items:center; gap:4px; font-family:var(--font-head); font-size:12.5px; font-weight:700;
    color:var(--gold); background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.25);
    padding:2px 10px; border-radius:100px; margin:0 2px; text-decoration:none; transition:var(--transition);
}
.sv2-step-desc a.sv2-product-tag:hover { background:rgba(212,175,55,0.18); border-color:var(--gold); }

/* ===== PRODUTOS PREMIUM ===== */
.sv2-products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; position:relative; z-index:1; }
.sv2-product-card {
    background:var(--dark); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px;
    transition:var(--transition);
}
.sv2-product-card:hover { border-color:rgba(212,175,55,0.3); transform:translateY(-3px); }
.sv2-product-name { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--gold); margin-bottom:6px; }
.sv2-product-desc { font-size:13.5px; color:var(--text-dim); line-height:1.5; }

/* ===== BENEFÍCIOS ===== */
.sv2-benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; position:relative; z-index:1; }
.sv2-benefit { display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--text-dim); line-height:1.5; }
.sv2-benefit svg { flex-shrink:0; color:#28c840; margin-top:2px; }

/* ===== RESULTADO / CTA DO PAINEL ===== */
.sv2-result {
    display:flex; align-items:center; gap:16px; background:rgba(212,175,55,0.06); border:1px solid rgba(212,175,55,0.2);
    border-radius:var(--radius-sm); padding:16px 22px; margin-top:20px; position:relative; z-index:1;
}
.sv2-result svg { flex-shrink:0; color:var(--gold); }
.sv2-result p { font-size:15px; color:var(--text); line-height:1.6; }
.sv2-result strong { color:var(--gold); }

.sv2-panel-cta { display:flex; gap:16px; margin-top:20px; position:relative; z-index:1; flex-wrap:wrap; }

/* ===== MOBILE SELECT (troca a sidebar em telas pequenas) ===== */
.sv2-mobile-select { display:none; }

/* ===== TRUST STRIP ===== */
.sv2-trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.sv2-trust-item { text-align:center; padding:28px 20px; }
.sv2-trust-icon { width:56px; height:56px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:rgba(212,175,55,0.1); border:1px solid rgba(212,175,55,0.2); border-radius:50%; color:var(--gold); }
.sv2-trust-item h4 { font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--white); margin-bottom:6px; }
.sv2-trust-item p { font-size:13.5px; color:var(--text-dim); line-height:1.5; }

@media (max-width:1024px) {
    .sv2-explorer { grid-template-columns:1fr; }
    .sv2-list { position:static; flex-direction:row; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
    .sv2-item { flex-shrink:0; min-width:220px; }
    .sv2-panel { padding:32px 24px; }
    .sv2-benefits { grid-template-columns:1fr; }
    .sv2-trust-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
    .sv2-panel-head { flex-direction:column; }
    .sv2-panel-meta { text-align:left; }
    .sv2-trust-grid { grid-template-columns:1fr; }
}