/* Platform medallions under the banner's download plate (4 Nov 2026): Windows, Android, iOS and Mac, each opening its
   tab of the download page (#pc, #android, #web: iPhone, iPad and Mac play in the browser). Art: gothic medallions
   made with ChatGPT to match the DESCARGAR plate (Recursos/web/plataformas_sheet_v1.png), cut to images/plataformas/. */
.hero-platforms {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}
/* desktop: the row may be a little wider than the 220 px plate, centred under it; .btn-download is 90 px tall there
   for a ~51 px plate (height: auto below 992 px), so the row is pulled up to the plate */
@media (min-width: 993px) {
    .hero-platforms { width: 244px; margin-left: -12px; gap: 12px; margin-top: -12px; } /* 4 x 52 + 3 x 12 */
}
.hero-platforms a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 52px;
    text-decoration: none;
}
.hero-platforms .hp-ico {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .85));
    transition: transform .2s ease;
}
/* the hover art sits on top, faded in: no flicker while it loads */
.hero-platforms .hp-ico::after {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .2s ease;
}
.hp-windows { background-image: url('../images/plataformas/windows.png'); }
.hp-windows::after { background-image: url('../images/plataformas/windows_hover.png'); }
.hp-android { background-image: url('../images/plataformas/android.png'); }
.hp-android::after { background-image: url('../images/plataformas/android_hover.png'); }
.hp-ios { background-image: url('../images/plataformas/ios.png'); }
.hp-ios::after { background-image: url('../images/plataformas/ios_hover.png'); }
.hp-mac { background-image: url('../images/plataformas/mac.png'); }
.hp-mac::after { background-image: url('../images/plataformas/mac_hover.png'); }
.hero-platforms .hp-name {
    margin-top: 3px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .4px;
    color: #c9c3c0;
    text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, .9);
    transition: color .2s ease;
}
.hero-platforms a:hover .hp-ico,
.hero-platforms a:focus-visible .hp-ico { transform: translateY(-2px); }
.hero-platforms a:hover .hp-ico::after,
.hero-platforms a:focus-visible .hp-ico::after { opacity: 1; }
.hero-platforms a:hover .hp-name,
.hero-platforms a:focus-visible .hp-name { color: #f3e6e6; }

/* The logo is centred and 500 px wide; at 15% from the right the plate and its medallions fell on its last letter below
   ~1400 px. Move the block right just enough to clear the logo (50% - 505 px: half the logo, the 25 px the row overhangs
   the plate, and a margin), never past 15% nor under 2%. */
@media (min-width: 993px) {
    .hero-download { right: clamp(2%, calc(50% - 505px), 15%); }
}
@media (max-width: 992px) {
    .hero-platforms a { width: 44px; }
    .hero-platforms .hp-ico { width: 44px; height: 44px; }
    .hero-platforms .hp-name { font-size: 9px; }
}
@media (max-width: 576px) {
    .hero-platforms { gap: 2px; margin-top: 2px; }
    .hero-platforms a { width: 34px; }
    .hero-platforms .hp-ico { width: 34px; height: 34px; }
    .hero-platforms .hp-name { font-size: 7px; letter-spacing: 0; }
}