/* Componentes próprios da Harpa, alinhados aos cartões de leitura da Bíblia. */
.harpa-controls .search-wrapper { max-width: 620px; margin: 0 auto; }
.hino-container { position: relative; width: 100%; box-sizing: border-box; padding: clamp(24px, 4vw, 40px); margin-bottom: 3rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 10px 30px var(--color-shadow); }
.hino-topo, .hino-info-group { display: flex; align-items: center; } .hino-topo { justify-content: space-between; gap: 16px; margin-bottom: 18px; } .hino-info-group { gap: 10px; }
.hino-numero { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid rgba(59,108,183,.24); border-radius: 999px; background: rgba(59,108,183,.1); color: var(--color-primary); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.btn-fav-hino { border: 0; background: transparent; color: var(--color-text-secondary); font-size: 1.45rem; line-height: 1; cursor: pointer; transition: color .2s, transform .2s; } .btn-fav-hino:hover { color: var(--color-accent); transform: scale(1.15); } .btn-fav-hino.ativo { color: var(--color-accent); }
.hino-titulo { margin: 0 0 26px; color: var(--color-text); font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.3; }
.estrofe { margin: 0 0 1.7rem; color: var(--color-text); font-size: 1.06rem; line-height: 1.85; white-space: pre-line; }
.refrao { position: relative; margin: 28px 0; padding: 28px 24px 22px; border: 1px solid rgba(59,108,183,.18); border-left: 4px solid var(--color-primary); border-radius: 12px; background: rgba(59,108,183,.06); color: var(--color-text); font-style: italic; line-height: 1.8; white-space: pre-line; }
.refrao::before { content: "REFRÃO"; position: absolute; top: -10px; left: 16px; padding: 0 8px; background: var(--color-bg-secondary); color: var(--color-primary); font-size: .7rem; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.badge-corinho { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(217,83,79,.13); color: #c4423e; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.btn-video-trigger { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 24px auto; padding: 12px 20px; border: 0; border-radius: 10px; background: var(--color-primary); color: #fff !important; font: inherit; font-size: .88rem; font-weight: 800; letter-spacing: .03em; cursor: pointer; }
.videos-section { margin-top: 40px; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-bg-secondary); box-shadow: 0 8px 24px var(--color-shadow); }.videos-title { margin: 0 0 24px; color: var(--color-text); font-size: 1.35rem; text-align: center; }.videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }.video-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); }.video-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }.video-card p { margin: 0; padding: 14px; color: var(--color-text); font-size: .94rem; font-weight: 600; }