/* pages/cartoes.css */
.cartoes-section { padding: var(--space-8) var(--space-6) var(--space-16); }
.cartoes-intro { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-bottom: var(--space-8); max-width: 620px; line-height: var(--line-height-relaxed); font-style: italic; }

.cartoes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }

.cartao-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); cursor: pointer; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.cartao-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cartao-card:focus { outline: 2px solid var(--color-brand-blue); outline-offset: 3px; }

.cartao-card__header { display: flex; align-items: center; gap: var(--space-3); }
.cartao-card__logo { height: 44px; max-width: 80px; object-fit: contain; }
.cartao-card__bandeira { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: 1px; }
.cartao-card__bandeira--visa { background: #1A1F71; color: #fff; }
.cartao-card__bandeira--mastercard { background: #EB001B; color: #fff; }
.cartao-card__bandeira--amex { background: #007BC1; color: #fff; }
.cartao-card__bandeira--elo { background: #FFD600; color: #1A1A2E; }

.cartao-card__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); color: var(--color-text-primary); line-height: 1.3; }
.cartao-card__banco { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.cartao-card__estrelas { font-size: var(--font-size-sm); color: var(--color-brand-yellow); letter-spacing: 2px; }

.cartao-card__dados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); background: var(--color-bg-page); border-radius: var(--radius-md); padding: var(--space-3); }
.cartao-card__dado { display: flex; flex-direction: column; gap: 2px; }
.cartao-card__dado--full { grid-column: 1/-1; }
.cartao-card__dado-label { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: var(--font-weight-semi); }
.cartao-card__dado-val { font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); color: var(--color-text-primary); }

.cartao-card__beneficios { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.cartao-card__beneficios li { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.cartao-card__cta { font-size: 11px; font-weight: var(--font-weight-semi); color: var(--color-brand-blue); margin-top: auto; }

/* Detalhe */
.cartao-detalhe-section { padding: var(--space-8) var(--space-6) var(--space-16); max-width: 760px; margin: 0 auto; }
.cartao-detalhe__resumo { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); }
.cartao-detalhe__estrelas { font-size: var(--font-size-lg); color: var(--color-brand-yellow); margin-bottom: var(--space-4); }
.cartao-detalhe__estrelas span { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-left: var(--space-2); }
.cartao-detalhe__dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.cartao-detalhe__beneficios { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.cartao-detalhe__beneficios li { font-size: var(--font-size-sm); color: var(--color-text-secondary); display: flex; gap: var(--space-2); }

/* Compartilhado entre detalhe pages */
.detalhe__voltar { display: inline-block; font-size: var(--font-size-sm); color: var(--color-brand-blue); font-weight: var(--font-weight-semi); margin-bottom: var(--space-6); transition: opacity var(--transition-fast); }
.detalhe__voltar:hover { opacity: 0.7; }
.detalhe__conteudo { background: var(--color-bg-white); border-radius: var(--radius-lg); padding: var(--space-8); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6); }
.detalhe__link { text-align: center; margin-top: var(--space-6); }