/* Capturas reales de las experiencias de la landing de medios. */
.showcase .visual{height:auto;aspect-ratio:3/2;isolation:isolate}
.showcase .visual .illustration{position:absolute;inset:0}
.showcase .visual>span,.showcase .visual>b,.showcase .illustration{transition:opacity .22s ease}
.showcase .game-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#102b23;opacity:0;z-index:1;transition:opacity .22s ease;pointer-events:none}
.showcase .experience:hover .game-preview,.showcase .experience:focus-within .game-preview{opacity:1}
.showcase .experience:hover .visual>span,.showcase .experience:hover .visual>b,.showcase .experience:hover .illustration,.showcase .experience:focus-within .visual>span,.showcase .experience:focus-within .visual>b,.showcase .experience:focus-within .illustration{opacity:0}
.showcase .visual:focus-visible{outline:4px solid #f1ca68;outline-offset:-4px}
.showcase .visual:focus-visible::after{content:"";position:absolute;inset:3px;border:3px solid #f1ca68;border-radius:3px;z-index:2;pointer-events:none}
.preview-hint{margin:-8px 0 24px;font-size:14px;line-height:1.6;color:var(--muted)}
.preview-hint-touch{display:none}
@media (hover:none),(pointer:coarse),(max-width:680px){
 .showcase .game-preview{opacity:1}
 .showcase .visual>span,.showcase .visual>b,.showcase .illustration{opacity:0}
 .preview-hint-pointer{display:none}
 .preview-hint-touch{display:inline}
}
@media (prefers-reduced-motion:reduce){
 .showcase .game-preview,.showcase .visual>span,.showcase .visual>b,.showcase .illustration{transition:none}
}
@media print{
 .showcase .game-preview{opacity:1}
 .showcase .visual>span,.showcase .visual>b,.showcase .illustration{opacity:0}
 .preview-hint{display:none}
}