/* Blocos do padrao v2 (origem: pagina /boletos-e-carnes/): FAQ compacto, passos, cards de recurso e antes/depois.
   Carregado pelas paginas que usam esses blocos, inclusive a home (so o FAQ). */
:root { --v2x-blue: #0062db; --v2x-blue-deep: #0041a3; }

/* FAQ compacto: um cartao com as perguntas em linhas, duas colunas no desktop. */
.v2x-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; max-width: 1040px; margin-top: 28px; padding: 8px 28px; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; }
.v2x-faq details, .v2x-faq details[open] { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #eef2f7; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.v2x-faq details:nth-last-child(-n+2) { border-bottom: 0; }
.v2x-faq.is-odd details:nth-last-child(2) { border-bottom: 1px solid #eef2f7; }
.v2x-faq summary { position: static; display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #0f172a; }
.v2x-faq summary::-webkit-details-marker { display: none; }
.v2x-faq summary::after, .v2x-faq summary::before { display: none; content: none; }
.v2x-faq summary:hover { color: var(--v2x-blue); }
.v2x-faq-q { flex: none; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: #eff6ff; color: var(--v2x-blue); font-size: 13px; font-weight: 800; }
.v2x-faq-chev { margin-left: auto; flex: none; width: 18px; height: 18px; fill: none; stroke: #94a3b8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.v2x-faq details[open] .v2x-faq-chev { transform: rotate(180deg); stroke: var(--v2x-blue); }
.v2x-faq details[open] .v2x-faq-q { background: var(--v2x-blue); color: #fff; }
.v2x-faq details > :not(summary) { padding: 0; margin: -4px 0 16px 38px; color: #64748b; font-size: 14.5px; line-height: 1.6; }
.v2x-faq details > ul, .v2x-faq details > ol { padding-left: 18px; }
.v2x-faq a { color: var(--v2x-blue); font-weight: 600; }
.v2x-faq-help { margin-top: 20px; text-align: center; color: #64748b; font-size: 15px; }
.v2x-faq-help a { color: var(--v2x-blue); font-weight: 600; }

/* Passos numerados: linha tracejada ligando os passos quando sao 4. */
.v2x-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; list-style: none; padding: 0; margin-top: 36px; position: relative; }
.v2x-steps.is-flow { grid-template-columns: repeat(4, 1fr); }
.v2x-steps.is-flow::before { content: ""; position: absolute; top: 50px; left: 12%; right: 12%; border-top: 2px dashed #bfdbfe; }
.v2x-steps > li { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 26px 22px; }
.v2x-steps small { display: block; margin-top: 16px; color: var(--v2x-blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.v2x-steps h3, .v2x-cards h3 { margin: 6px 0 8px; font-size: 19px; line-height: 1.3; color: #0f172a; }
.v2x-steps p, .v2x-cards p { margin: 0; color: #64748b; font-size: 15px; line-height: 1.6; }
.v2x-step-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: #eff6ff; color: var(--v2x-blue); font-size: 16px; font-weight: 800; }
.v2x-step-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v2x-step-icon.is-done { background: #16a34a; color: #fff; }
.v2x-steps > li:last-child .v2x-step-icon.is-number { background: var(--v2x-blue); color: #fff; }

/* Cards de recurso com rotulo. */
.v2x-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.v2x-cards.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
.v2x-cards > article { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 22px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.v2x-cards > article:hover { border-color: #bfdbfe; box-shadow: 0 18px 40px -28px rgba(0,65,163,.45); transform: translateY(-2px); }
.v2x-cards .v2x-label { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: #eff6ff; color: var(--v2x-blue); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }

/* Antes e depois. */
.v2x-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.v2x-compare-col { border-radius: 18px; padding: 28px; }
.v2x-compare-col h3 { margin: 0 0 16px; font-size: 20px; }
.v2x-compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v2x-compare-col li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.5; }
.v2x-compare-col li::before { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.v2x-compare-col.is-before { background: #fff; border: 1px solid #e2e8f0; color: #475569; }
.v2x-compare-col.is-before h3 { color: #64748b; }
.v2x-compare-col.is-before li::before { content: "\2715"; background: #fef2f2; color: #dc2626; }
.v2x-compare-col.is-after { background: linear-gradient(135deg, var(--v2x-blue), var(--v2x-blue-deep)); color: #fff; box-shadow: 0 24px 60px -28px rgba(0,65,163,.55); }
.v2x-compare-col.is-after h3 { color: #fff; }
.v2x-compare-col.is-after li::before { content: "\2713"; background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 1020px) {
  .v2x-cards, .v2x-cards.is-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .v2x-steps.is-flow { grid-template-columns: repeat(2, 1fr); }
  .v2x-steps.is-flow::before { display: none; }
}
@media (max-width: 640px) {
  .v2x-faq { grid-template-columns: 1fr; padding: 4px 18px; }
  .v2x-faq details:nth-last-child(2) { border-bottom: 1px solid #eef2f7; }
  .v2x-steps, .v2x-steps.is-flow, .v2x-compare, .v2x-cards, .v2x-cards.is-cols-3 { grid-template-columns: 1fr; }
}