/* ============================================================
   BOX EXPRESS — HOMEPAGE V3 | FASE 4 (2026)
   Performance, acessibilidade e pequenos ajustes finais.
   Carregar depois dos CSS das Fases 1, 2 e 3.
   ============================================================ */

/* Ligação acessível aos utilizadores de teclado.
   Fica invisível até receber foco, sem interferir com o design. */
.home-v3-skip-link {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 999999;
    padding: 11px 17px;
    border-radius: 10px;
    border: 2px solid #f3cc1f;
    background: #1b3563;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 9px 25px rgba(0, 0, 0, .2);
    transform: translateY(-180%);
    transition: transform .16s ease;
}
.home-v3-skip-link:focus,
.home-v3-skip-link:focus-visible {
    color: #fff;
    outline: 3px solid #f3cc1f;
    outline-offset: 2px;
    transform: translateY(0);
}

/* =====================================================
   BOX EXPRESS — HOMEPAGE V3.4.1
   CORREÇÃO DA IMAGEM DO VÍDEO INSTITUCIONAL
===================================================== */

.video-cover-wrapper::before {

    background-image: url("../img/video/vidBex.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

/* Fix aprovado para o FAQ: as setas ocupam sempre a margem direita.
   Incluído para preservar a correção V3.3.1. */
.home-v3-faq__list .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
}
.home-v3-faq__list .accordion-button::after {
    margin-left: auto !important;
    margin-right: 2px;
    flex: 0 0 14px;
}

/* Foco visível e consistente nos principais elementos interativos. */
.home-v3-path-card:focus-visible,
.home-v3-faq__toggle:focus-visible,
.home-v3-final-cta__primary:focus-visible,
.home-v3-final-cta__secondary:focus-visible,
.products-carousel .product-item a:focus-visible,
.video-play-btn:focus-visible,
.video-close:focus-visible {
    outline: 3px solid #f3cc1f;
    outline-offset: 4px;
}

@media (max-width: 575.98px) {
    .home-v3-faq__list .accordion-button { gap: 12px; }
    .home-v3-faq__list .accordion-button::after { margin-right: 0; }
}

/* Respeitar as preferências de acessibilidade do sistema operativo.
   O JS da Fase 4 também mantém o primeiro slide estático neste modo. */
@media (prefers-reduced-motion: reduce) {
    .hero-sequence-image,
    .hero-sequence-image.active,
    .back-to-top-btn,
    .home-v3-path-card,
    .home-v3-faq__toggle,
    .home-v3-final-cta__primary,
    .home-v3-final-cta__secondary {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .video-play-btn,
    .video-play-btn::before,
    .typewriter-yellow.cursor-blink::after {
        animation: none !important;
        transition: none !important;
    }
}