/* Sintonizador custom header: image starts at the top of the page, behind the header; dark page-bg fades (no gold) */
.page { position: relative; --band-h: 310px; --hdr-h: 110px; }
.hdr-art-sp { height: var(--band-h); }
.hdr-art { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--hdr-h) + var(--band-h)); z-index: 0; pointer-events: none; background: #0d0c0b center/cover no-repeat; }
.hdr-art::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,12,11,.97) 0%, rgba(13,12,11,.9) 22%, rgba(13,12,11,.72) 38%, rgba(13,12,11,.28) 54%, rgba(13,12,11,0) 66%, rgba(13,12,11,0) 76%, rgba(13,12,11,.7) 91%, #0d0c0b 100%); }
.hdr-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, #0d0c0b 0%, rgba(13,12,11,0) 12%, rgba(13,12,11,0) 88%, #0d0c0b 100%); }
.hdr-art-after { position: relative; z-index: 1; }
html.has-hdr-art .profile:not(.shrunk) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
html.has-hdr-art .page > :not(.hdr-art):not(.sticky-cta):not(.toast) { position: relative; }
html.has-hdr-art .page > .profile { position: sticky; }
@media (min-width: 641px) { html.has-hdr-art .hero { margin-top: 0; } }
@media (max-width: 640px) {
  .page { --band-h: 200px; --hdr-h: 202px; }
  .hdr-art::after { display: none; }
  html.mh .hdr-art-after .mh-actions { display: flex; margin: 0 0 6px; }
}
.ha-modal { position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100dvh; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(5,5,4,.65); }
.ha-dlg { width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; padding: 20px; border-radius: 18px; background: #14120f; border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 12px; color: #ece4d6; }
.ha-dlg h2 { margin: 0; font-size: 18px; }
.ha-prev { flex: none; height: 180px; border-radius: 12px; overflow: hidden; background: #0d0c0b; border: 1px solid rgba(255,255,255,.06); }
.ha-img { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; transition: background-position .3s ease; }
.ha-lab { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #a39b90; letter-spacing: .02em; }
.ha-q { padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: #ece4d6; font-size: 16px; }
.ha-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ha-it { appearance: none; padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; color: #ece4d6; cursor: pointer; text-align: center; font-size: 11.5px; overflow: hidden; }
.ha-it img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.ha-it span { display: block; padding: 4px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-it[aria-selected="true"] { border-color: #c9a063; }
.ha-none { grid-column: 1/-1; margin: 0; color: #8a8278; font-size: 13px; }
.ha-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); width: fit-content; }
.ha-seg button { appearance: none; border: 0; padding: 7px 14px; border-radius: 999px; background: none; color: #a39b90; font-size: 13px; cursor: pointer; }
.ha-seg button[aria-pressed="true"] { background: #ece4d6; color: #15120d; }
.ha-msg { margin: 0; min-height: 1em; font-size: 13px; color: #c9a063; }
.ha-acts { display: flex; align-items: center; gap: 8px; } .ha-acts span { flex: 1; }
.ha-acts button { appearance: none; border: 1px solid rgba(255,255,255,.12); padding: 10px 16px; border-radius: 999px; background: none; color: #ece4d6; font-size: 14px; cursor: pointer; }
.ha-acts .ha-ok { background: #c9a063; border-color: #c9a063; color: #15120d; font-weight: 700; } .ha-acts .ha-ok:disabled { opacity: .45; cursor: default; }
.ha-acts .ha-rm { color: #e08a7a; }
.ha-src { color: #6f685f; font-size: 11px; }
@media (max-width: 640px) { .ha-modal { place-items: end center; padding: 0; } .ha-dlg { border-radius: 18px 18px 0 0; max-height: 92%; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .ha-res { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ha-prev { height: 130px; } }