/* ==========================================================================
   Cuadro de Hazte un Hit en la portada: mismo formato que el de Zector Cinema
   (emblema, título, tira de tarjetas, botón y cifras) con la foto del Panecillo de fondo.
   ========================================================================== */
.hp-portada { position: relative; margin-top: 26px; border-radius: 14px; overflow: hidden; padding: 22px 0 20px; border: 1px solid #3a2a58; background: #1a1130; }
.hp-fondo { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; background: url("../img/hazte-un-hit/fondo-panecillo-tarjeta.jpg") 60% 12% / cover no-repeat; }
.hp-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #1d1236 0%, rgba(29, 18, 54, 0.7) 30%, rgba(29, 18, 54, 0) 75%), linear-gradient(0deg, rgba(17, 11, 32, 0.92) 0%, rgba(17, 11, 32, 0.55) 38%, rgba(17, 11, 32, 0) 62%); }
.hp-cab, .hp-tira, .hp-pie { position: relative; z-index: 1; }
.hp-cab { padding: 0 20px; display: flex; gap: 16px; align-items: center; min-height: 130px; }
.hp-emblema { width: 46px; height: 46px; color: #efe2c4; flex: none; }
.hp-emblema .hp-nota { stroke: var(--acento-hazte-un-hit, #c9a24b); }
.hp-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento-hazte-un-hit, #c9a24b); }
.hp-cab h3 { margin: 2px 0 4px; font-family: var(--fuente-editorial); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.hp-cab p { margin: 0; color: #d9cfe8; font-size: 0.92rem; line-height: 1.4; }
.hp-tira { display: flex; gap: 12px; overflow-x: auto; padding: 18px 20px 6px; scroll-padding-left: 20px; scroll-snap-type: x proximity; scrollbar-width: none; }
.hp-tira::-webkit-scrollbar { display: none; }
.hp-item { flex: none; width: 138px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.hp-foto { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; border-radius: 10px; overflow: hidden; border: 1px solid #4a3a6a; background: #120a22; }
.hp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-foto .hp-emblema { width: 46%; height: auto; opacity: 0.75; }
.hp-item b { display: block; margin-top: 8px; font-size: 0.875rem; line-height: 1.25; overflow-wrap: anywhere; }
.hp-pie { padding: 16px 20px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hp-n { color: #c4b6da; font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) { .hp-item:hover .hp-foto { border-color: var(--acento-hazte-un-hit, #c9a24b); } }
.hp-item:focus-visible { outline: 2px solid var(--acento-hazte-un-hit, #c9a24b); outline-offset: 3px; border-radius: 10px; }
@media (max-width: 700px) {
    .hp-cab h3 { font-size: 1.5rem; }
    .hp-fondo { width: 54%; background-position: 78% 8%; }
}