/* WEB 166 BLOQUE A: localized recommendations only. Home hero + navigation retain Web 164 CSS. */
.home2026 .step3Spotlights .compaReco{background-position:center 38%!important;background-size:cover!important;overflow:hidden;isolation:isolate;min-height:270px}
.home2026 .step3Spotlights .compaReco .compaRecoShade{background:linear-gradient(to bottom,rgba(5,9,16,.02) 0%,rgba(5,9,16,.08) 30%,rgba(5,9,16,.76) 77%,rgba(5,9,16,.92) 100%)!important;pointer-events:none}
.home2026 .step3Spotlights .compaReco .compaCardInner{position:absolute!important;inset:auto 14px 14px 14px!important;display:grid!important;grid-template-columns:minmax(56px,76px) minmax(0,1fr)!important;align-items:end!important;gap:10px!important;z-index:3!important}
.home2026 .step3Spotlights .compaReco .compaCardInner img{width:100%!important;max-height:110px!important;object-fit:contain!important}
.home2026 .step3Spotlights .compaReco .compaCardInner>div{min-width:0}
.home2026 .step3Spotlights .compaReco .compaCardInner strong,.home2026 .step3Spotlights .compaReco .compaCardInner span{overflow-wrap:anywhere}
.home2026 .compaRecoMenuBtn166{margin-top:8px;min-height:38px;min-width:106px;padding:8px 14px;border:1px solid rgba(255,202,96,.7);border-radius:100px;background:linear-gradient(115deg,#f9d16b,#eea82e);color:#15120d;font-size:12px;font-weight:700;line-height:1.2;font-family:inherit;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.home2026 .compaRecoMenuBtn166:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:580px){.home2026 .step3Spotlights .compaReco{min-height:310px;background-position:center 36%!important}.home2026 .step3Spotlights .compaReco .compaCardInner{grid-template-columns:64px minmax(0,1fr)!important}}

/* WEB 167 / QA 166: exclusivamente fotografía de El Compa te recomienda.
   Elimina oscurecimiento superior causado por capas superpuestas (:before,
   :after y compaRecoShade). Conserva degradado inferior para legibilidad.
   No afecta hero, otros spotlights ni El Compa flotante global. */
.home2026 .step3Spotlights .heroSpotlightCard.compaReco::before {
  background:linear-gradient(to bottom,transparent 0%,transparent 48%,rgba(5,9,16,.16) 63%,rgba(5,9,16,.56) 83%,rgba(5,9,16,.74) 100%)!important;
  pointer-events:none!important;
}
.home2026 .step3Spotlights .heroSpotlightCard.compaReco::after {
  background:none!important;
  pointer-events:none!important;
}
.home2026 .step3Spotlights .heroSpotlightCard.compaReco .compaRecoShade {
  background:linear-gradient(to bottom,transparent 0%,transparent 53%,rgba(5,9,16,.09) 69%,rgba(5,9,16,.34) 85%,rgba(5,9,16,.55) 100%)!important;
  pointer-events:none!important;
}