/* sorteo-campeonato.css — la tarjeta, la hoja de premios y bases y la lista de ganadores del Sorteo de Campeonato (public/js/sorteo-campeonato.js).
   One UI (docs/oneui-app.md): solo piezas y tokens del sistema (.tarjeta, .btn-valor/.btn-ghost/.btn-texto, .cu-btns, OLI.campo, OLI.hoja; --sp-*, --fs-*, --lh-*, --text-*). Ningún color suelto,
   ningún tamaño de letra ni radio fuera de los tokens, ningún estilo en línea. Mobile primero. */
.sc-card { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; margin-bottom: var(--sp-3); }
.sc-card h3 { margin: 0; font-size: var(--fs-seccion); line-height: var(--lh-seccion); font-weight: 600; }
.sc-card .ih-eb { margin: 0; }
.sc-p { margin: 0; }
.sc-nota { font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
.sc-ganaste { margin: 0; }

/* El ticket digital: tres datos en una fila que se apila en pantallas angostas. */
.sc-ticket { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radio-md); background: var(--surface-grouped); }
.sc-ticket > div { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.sc-ticket dt { font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
.sc-ticket dd { margin: 0; text-align: right; }
@media (min-width: 600px) { .sc-ticket { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-ticket > div { flex-direction: column; align-items: flex-start; } .sc-ticket dd { text-align: left; } }

/* Premios, bases y ganadores (dentro de una hoja). */
.sc-cat, .sc-base { display: grid; gap: var(--sp-1); }
.sc-cat h4, .sc-base h4 { margin: var(--sp-3) 0 0; font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); }
.sc-cat h5 { margin: var(--sp-2) 0 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); font-weight: 600; }
.sc-bases-h { margin: var(--sp-5) 0 0; font-size: var(--fs-seccion); line-height: var(--lh-seccion); font-weight: 600; }
.sc-lista { margin: 0; padding-left: var(--sp-5); }
.sc-lista li { min-height: var(--alto-boton-ter); display: flex; align-items: center; }

/* Consentimiento breve del paso de la cédula: la casilla y el texto, con zona táctil de 44 px. */
.sc-acepto { display: flex; gap: var(--sp-2); align-items: flex-start; min-height: var(--alto-boton-ter); padding: var(--sp-2) 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); }
.sc-acepto input { flex: none; width: var(--alto-boton-ter); height: var(--alto-boton-ter); margin: calc(var(--sp-2) * -1) 0 calc(var(--sp-2) * -1) calc(var(--sp-3) * -1); }

/* Landing pública: el encabezado es fijo, así que el banner baja lo que mide el encabezado más un respiro. */
.sc-landing { margin-top: 5.5rem; }
.sc-landing:not([hidden]) + .hero { padding-top: var(--sp-8); }