/* /como-apostar — two programme sheets with octagon steps, modalidades as
 * programme rows, facts tiles, FAQ on <details>. Tokens only. */

.way { display: flex; flex-direction: column; }
.way__head { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--color-text); }
.way__head .oct { --s: 52px; }
.way__head .tile__h { margin-top: 4px; }
.way__steps { margin: 0; padding: 0; }
.way__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); position: relative; }
.way__steps li:not(:last-child)::before { content: ""; position: absolute; left: 19.5px; top: 58px; bottom: -12px; width: 1px; background: var(--color-border); }
.way__steps .oct { --s: 40px; font-size: 14px; }
.way__steps b { display: block; font-weight: 600; font-size: 17px; letter-spacing: -.01em; margin-top: 8px; }
.way__steps p { margin: 4px 0 0; color: var(--color-muted); font-size: 15px; }
.way__steps a { color: var(--color-brand); text-underline-offset: 3px; }
.way__cta { margin-top: auto; padding-top: 20px; }

/* chegada chips */
.ca-finish { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; color: var(--color-text); font-size: 14px; }
.ca-finish > span { display: inline-flex; align-items: center; gap: 8px; }
.ca-finish .oct { --s: 28px; font-size: 12px; }

/* modalidades rows */
.mods { background: var(--color-surface); border: 1px solid var(--color-border); }
.mods__row { display: grid; grid-template-columns: 120px minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 28px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); align-items: start; }
.mods__row:last-child { border-bottom: 0; }
.mods__row--head { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.mods__n { display: flex; align-items: center; gap: 10px; }
.mods__n .oct { --s: 48px; font-size: 20px; }
.mods__n .mono { font-size: 12px; color: var(--color-muted); letter-spacing: .06em; }
.mods__h { font-size: var(--fs-h3); letter-spacing: -.03em; font-weight: 600; margin: 4px 0 6px; line-height: 1.1; }
.mods__row p { margin: 0; color: var(--color-muted); }
.mods__ex { border-left: 1px solid var(--color-border); padding-left: 20px; }
.mods__ex p { color: var(--color-text); font-size: 15px; }
.mods__rt { margin-top: 8px !important; display: inline-block; padding: 4px 8px; background: var(--color-brand-tint); color: var(--color-brand) !important; font-weight: 600; font-size: 14px !important; }
.note a { color: var(--color-brand); text-underline-offset: 3px; }

/* facts */
.ca-fact { display: flex; flex-direction: column; gap: 8px; }
.ca-fact p { margin: 0; color: var(--color-muted); }
.ca-fact__big { font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--color-text) !important; min-height: 56px; display: flex; align-items: flex-end; }
.ca-fact__big small { font-size: 18px; letter-spacing: 0; margin-left: 6px; color: var(--color-muted); }
.ca-fact__big .oct { --s: 56px; font-size: 18px; }
.ca-fact .aviso { color: var(--color-text); }
.ca-fact .lnk { margin-top: auto; }

/* FAQ (details) */
.faq { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-text); }
.faq__i { border-bottom: 1px solid var(--color-border); }
.faq__i:last-child { border-bottom: 0; }
.faq__i summary { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 12px 24px; cursor: pointer; font-weight: 600; font-size: 17px; transition: background-color var(--dur-fast), color var(--dur-fast); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { background: var(--color-surface-2); color: var(--color-brand); }
.faq__i summary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
.faq__n { font-size: 13px; color: var(--color-accent); }
.faq__i summary .ico { transition: transform var(--dur-base) var(--ease); }
.faq__i[open] summary .ico { transform: rotate(180deg); }
.faq__i[open] summary { color: var(--color-brand); }
.faq__i:not([open]) > :not(summary) { display: none; }
.faq__i p { margin: 0; padding: 0 24px 20px 76px; color: var(--color-muted); max-width: 80ch; }
.faq__i p a { color: var(--color-brand); text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .mods__row { grid-template-columns: 96px minmax(0, 1fr); }
  .mods__ex { grid-column: 2; border-left: 0; padding-left: 0; }
  .mods__row--head span:last-child { display: none; }
}
@media (max-width: 759px) {
  .mods__row { grid-template-columns: 1fr; padding: 18px 16px; gap: 8px; }
  .mods__ex { grid-column: 1; padding-top: 8px; border-top: 1px dashed var(--color-border); }
  .mods__row--head { display: none; }
  .faq__i summary { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 12px 16px; font-size: 16px; }
  .faq__i p { padding: 0 16px 18px 56px; }
}
.phero__lead strong { white-space: nowrap; }