/* /como-apostar — layout only: steps in two rows, online notice + links,
 * modalidade cards, rateio/programa pair, RG + CTA. Tokens and components only. */

/* steps: 3 per row on desktop (each step carries 2–3 sentences) */
.ca-steps { --steps: 3; }
.ca-steps .step:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.ca-steps .step p { font-size: var(--fs-small); max-width: 42ch; }

/* two columns */
.ca-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ca-online { margin-top: 28px; }
.ca-online a, .ca-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ca-online__lead { color: var(--color-muted); margin: 6px 0 16px; }
.ca-links { display: grid; border: 1px solid var(--line-dark); background: var(--color-surface); }
.ca-links .doc { border-right: 0; border-bottom: 1px solid var(--line-dark); }
.ca-links .doc:last-child { border-bottom: 0; }

/* modalidades */
.ca-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ca-mod {
  display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px;
  background: var(--color-surface-white); border: 1px solid var(--line-light); border-top: 3px solid var(--color-ink);
}
.ca-mod__head { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.ca-mod__head > div { display: grid; gap: 8px; justify-items: start; }
.ca-mod h3 { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.ca-mod p { font-size: var(--fs-small); color: var(--color-muted-light); }
.ca-mod .ca-mod__def { color: var(--color-ink); font-weight: 600; font-size: 1rem; }
.ca-mod__case { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-light); }
.ca-mod .ca-mod__case { color: var(--color-ink); }
.ca-mod__case .mono { display: block; margin-bottom: 6px; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--color-data-light); }
#modalidades .panel__note a { color: var(--color-ink); }

/* rateio + programa */
.ca-text { margin: 20px 0 24px; color: var(--color-muted); max-width: 62ch; }
.ca-text p + p { margin-top: .9em; }
.ca-text--after { margin-top: 20px; }
.ca-line { display: grid; grid-template-columns: auto minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line-dark-strong); background: var(--color-bg); }
.ca-line > div { padding: 14px 16px; border-right: 1px solid var(--line-dark); min-width: 0; }
.ca-line > div:last-child { border-right: 0; }
.ca-line dt { font: 500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.ca-line dd { margin: 0; font: 500 var(--fs-small)/1.3 var(--font-mono); overflow-wrap: anywhere; }
.ca-line__horse dd { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 1.0625rem; text-transform: uppercase; }

/* RG + CTA */
.ca-rg { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ca-rg .prose > .sec__eyebrow + .sec__title { margin-top: 0; }
.ca-rg .prose a { color: var(--color-ink); }
.ca-cta { display: grid; gap: 16px; justify-items: start; padding: 28px; background: var(--color-surface-white); border: 1px solid var(--line-light); border-top: 3px solid var(--color-brand); }
.ca-cta h3 { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: var(--fs-h3); line-height: 1.1; text-transform: uppercase; }
.ca-cta p { color: var(--color-muted-light); font-size: var(--fs-small); }

@media (max-width: 1100px) {
  .ca-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-line { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .ca-line > div { border-bottom: 1px solid var(--line-dark); }
  .ca-line > div:nth-child(3) { border-right: 0; }
  .ca-line > div:nth-child(n+4) { border-bottom: 0; }
}
@media (max-width: 860px) {
  .ca-duo, .ca-rg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ca-steps .step p { max-width: none; }
  .ca-mods { grid-template-columns: minmax(0, 1fr); }
  .ca-mod { padding: 18px; }
  .ca-cta { padding: 20px; }
  .ca-line { grid-template-columns: auto minmax(0, 1fr); }
  .ca-line > div { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .ca-line > div:nth-child(odd) { border-right: 1px solid var(--line-dark); }
  .ca-line > div:nth-child(n+4) { border-bottom: 1px solid var(--line-dark); }
  .ca-line > div:last-child { border-bottom: 0; grid-column: 1 / -1; border-right: 0; }
}