/* VARIÁVEIS iOS 26 */
    :root {
        --ios-red: #ff3b30;
        --ios-red-glow: rgba(255, 59, 48, 0.3);
        --glass-border: rgba(255, 255, 255, 0.1);
        --bg-card: #080808;
        --apple-spring: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ESTILO DO CARD (MANTIDO CONFORME SOLICITADO) */
    .waiolet-card-box {
        width: 100%;
        max-width: 320px;
        margin: 20px auto;
        perspective: 1000px;
    }

    .waiolet-card {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        background: var(--bg-card);
        border-radius: 28px;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid var(--glass-border);
        transition: all 0.5s var(--apple-spring);
        box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.02);
        z-index: 10;
    }

    .waiolet-card::before {
        content: '';
        position: absolute;
        top: -10%; right: -10%; width: 60%; height: 60%;
        background: radial-gradient(circle, var(--ios-red-glow) 0%, transparent 80%);
        z-index: 1;
        animation: breath 4s infinite ease-in-out;
    }

    .waiolet-card:hover {
        transform: translateY(-5px) scale(1.02);
        border-color: rgba(255, 59, 48, 0.4);
        box-shadow: 0 30px 60px rgba(255, 59, 48, 0.15);
    }

    .waiolet-card:active { transform: scale(0.95); }

    .waiolet-card-content {
        position: absolute;
        inset: 0;
        padding: 24px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    }

    .waiolet-badge {
        align-self: flex-start;
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 0.5px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        padding: 4px 10px;
        border-radius: 100px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.8px;
    }

    .waiolet-badge-dot {
        width: 5px; height: 5px;
        background: var(--ios-red);
        border-radius: 50%;
        box-shadow: 0 0 10px var(--ios-red);
        animation: blink 1s infinite;
    }

    .waiolet-info h3 { 
        color: #fff; 
        font-size: 21px; 
        font-weight: 800; 
        margin: 0; 
        letter-spacing: -0.8px;
        background: linear-gradient(to bottom, #fff 60%, rgba(255,255,255,0.7));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .waiolet-info p { 
        color: var(--ios-red); 
        font-size: 10px; 
        font-weight: 700; 
        margin-top: 3px; 
        text-transform: uppercase; 
        letter-spacing: 1.5px;
        opacity: 0.8;
    }

    /* MODAL ATUALIZADO (VÍDEO GRANDE/FULLSCREEN) */
    .waiolet-modal {
        position: fixed;
        inset: 0;
        background: #000;
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.6s var(--apple-spring);
        transform: scale(1.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .waiolet-modal.active { 
        opacity: 1; 
        visibility: visible; 
        transform: scale(1); 
    }

    .waiolet-iframe { 
        width: 100%; 
        height: 100%; 
        border: none;
        /* Garante que o conteúdo use toda a tela, inclusive áreas de notch */
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    /* BOTÃO FECHAR (OPCIONAL) */
    .waiolet-close {
        position: absolute;
        top: calc(20px + env(safe-area-inset-top));
        right: 20px;
        z-index: 100000;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255,255,255,0.1);
        color: white;
        width: 44px; height: 44px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: 0.3s;
    }
    .waiolet-close:active { transform: scale(0.9); opacity: 0.7; }

    /* ANIMAÇÕES */
    @keyframes breath {
        0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.5; }
        50% { transform: scale(1.2) translate(-5%, 5%); opacity: 0.8; }
    }

    @keyframes blink {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.3; transform: scale(0.8); }
    }