/*
===========================================================
 ENSOBRADOS VOICE
 Design System v2
 Frontend Styles
===========================================================
*/


/*
===========================================================
 VARIABLES
===========================================================
*/

:root {

    --ensv-bg: #f5f5f7;

    --ensv-card: #ffffff;

    --ensv-text: #1d1d1f;

    --ensv-muted: #86868b;

    --ensv-border: rgba(0,0,0,.08);

    --ensv-shadow:
        0 20px 60px rgba(0,0,0,.08);

    --ensv-radius-xl: 32px;

    --ensv-radius-lg: 24px;

    --ensv-radius-md: 18px;

    --ensv-radius-pill: 999px;

    --ensv-primary: #111111;

    --ensv-whatsapp: #25D366;

    --ensv-facebook: #1877f2;

    --ensv-telegram: #229ED9;

    --ensv-transition:
        .25s ease;

}


/*
===========================================================
 RESET
===========================================================
*/


.ens-voice-card *,
.ens-voice-share * {

    box-sizing:border-box;

}


.ens-voice-card a,
.ens-voice-share a {

    text-decoration:none;

}



/*
===========================================================
 GLOBAL VOICE CONTAINER
===========================================================
*/


.ens-voice-wrapper {

    width:100%;

    padding:40px 20px;

    background:var(--ensv-bg);

}



/*
===========================================================
 MAIN CARD
===========================================================
*/


.ens-voice-card {

    max-width:720px;

    margin:auto;

    background:var(--ensv-card);

    border-radius:var(--ensv-radius-xl);

    padding:32px;

    box-shadow:
        var(--ensv-shadow);

}



/*
===========================================================
 HEADER
===========================================================
*/


.ens-voice-header {

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:25px;

}


.ens-voice-icon {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f5f5f7;

    font-size:22px;

}


.ens-voice-header strong {

    display:block;

    color:var(--ensv-text);

    font-size:17px;

}


.ens-voice-header small {

    display:block;

    margin-top:4px;

    color:var(--ensv-muted);

}



/*
===========================================================
 COVER IMAGE
===========================================================
*/


.voice-cover,
.ens-voice-cover {

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:var(--ensv-radius-lg);

    display:block;

}



/*
===========================================================
 TYPOGRAPHY
===========================================================
*/


.voice-title,
.ens-voice-title {

    font-size:38px;

    line-height:1.1;

    letter-spacing:-1px;

    color:var(--ensv-text);

    margin:25px 0 15px;

}


.voice-description,
.ens-voice-description {

    font-size:18px;

    line-height:1.5;

    color:#555;

}

/*
===========================================================
 AUDIO PLAYER
===========================================================
*/


.ens-voice-player,
.voice-player {

    margin-top:35px;

    background:#f5f5f7;

    padding:22px;

    border-radius:var(--ensv-radius-lg);

}



/*
 AUDIO NATIVO
*/


.ens-voice-player audio,
.voice-player audio {

    width:100%;

}



/*
===========================================================
 CUSTOM PLAYER
===========================================================
*/


.ens-voice-card .ens-voice-play {

    width:64px;

    height:64px;

    border-radius:50%;

    border:none;

    background:var(--ensv-primary);

    color:white;

    font-size:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:20px auto;

    transition:
        transform var(--ensv-transition);

}


.ens-voice-play:hover {

    transform:scale(1.08);

}



/*
===========================================================
 PROGRESS BAR
===========================================================
*/


.ens-voice-progress {

    height:6px;

    background:#d2d2d7;

    border-radius:var(--ensv-radius-pill);

    overflow:hidden;

    margin-top:18px;

}


.ens-voice-progress span {

    display:block;

    height:100%;

    width:0%;

    background:#111;

    border-radius:inherit;

}



/*
===========================================================
 TIME
===========================================================
*/


.ens-voice-time {

    display:flex;

    justify-content:center;

    gap:6px;

    margin-top:10px;

    font-size:13px;

    color:var(--ensv-muted);

}



/*
===========================================================
 DOWNLOAD
===========================================================
*/


.ens-voice-download {

    margin-top:20px;

    text-align:center;

}


.ens-voice-download a {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    background:#f5f5f7;

    border-radius:var(--ensv-radius-pill);

    color:var(--ensv-text);

    font-size:14px;

    font-weight:600;

}



/*
===========================================================
 SHARE SYSTEM
===========================================================
*/


.ens-voice-share {

    margin:25px 0;

    text-align:center;

}



.ens-share-title {

    font-size:17px;

    font-weight:600;

    color:var(--ensv-text);

    margin-bottom:18px;

}



.ens-share-buttons {

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}



.ens-share-buttons a,
.ens-share-buttons button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:12px 20px;

    border:none;

    border-radius:

        var(--ensv-radius-pill);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    color:white;

    transition:

        transform var(--ensv-transition),
        opacity var(--ensv-transition);

}



.ens-share-buttons a:hover,
.ens-share-buttons button:hover {

    transform:translateY(-2px);

    opacity:.9;

}



/*
 SHARE COLORS
*/


.ens-whatsapp {

    background:var(--ensv-whatsapp);

}


.ens-facebook {

    background:var(--ensv-facebook);

}


.ens-telegram {

    background:var(--ensv-telegram);

}


.ens-copy {

    background:#1d1d1f;

}


/*
===========================================================
 LANDING / FOOTER
===========================================================
*/


.voice-wrapper,
.ens-voice-wrapper {

    width:100%;

    min-height:100vh;

    padding:40px 20px;

    background:var(--ensv-bg);

}



.voice-brand,
.ens-voice-brand {

    margin-bottom:20px;

    color:var(--ensv-muted);

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

}



.voice-footer,
.ens-voice-footer {

    margin-top:30px;

    text-align:center;

    color:var(--ensv-muted);

    font-size:14px;

}



/*
===========================================================
 CTA LINKS
===========================================================
*/


.ens-voice-cta {

    display:flex;

    justify-content:center;

    margin-top:25px;

}



.ens-voice-cta a {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:13px 24px;

    border-radius:var(--ensv-radius-pill);

    background:#111;

    color:white;

    font-weight:600;

    transition:

        transform var(--ensv-transition);

}


.ens-voice-cta a:hover {

    transform:translateY(-2px);

}



/*
===========================================================
 ANIMATIONS
===========================================================
*/


.ens-voice-card {

    animation:

        ensVoiceFade .35s ease;

}



@keyframes ensVoiceFade {


    from {

        opacity:0;

        transform:translateY(12px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}



/*
===========================================================
 RESPONSIVE
===========================================================
*/


@media(max-width:768px){


    .ens-voice-wrapper,
    .voice-wrapper {

        padding:20px 12px;

    }



    .ens-voice-card {

        padding:22px;

        border-radius:24px;

    }



    .voice-title,
    .ens-voice-title {

        font-size:30px;

    }



    .voice-description,
    .ens-voice-description {

        font-size:16px;

    }



    .ens-share-buttons {

        flex-direction:column;

        width:100%;

    }



    .ens-share-buttons a,
    .ens-share-buttons button {

        width:100%;

    }


}



@media(max-width:420px){


    .ens-voice-card {

        padding:18px;

    }



    .voice-title,
    .ens-voice-title {

        font-size:26px;

        letter-spacing:-.5px;

    }



}



/*
===========================================================
 UTILITIES
===========================================================
*/


.ens-hidden {

    display:none!important;

}


.ens-center {

    text-align:center;

}

.ens-read-article{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    padding:14px 24px;

    border-radius:999px;

    background:#1d1d1f;

    color:#fff !important;

    text-decoration:none;

    font-weight:600;

    transition:.2s ease;

}


.ens-read-article:hover{

    transform:translateY(-2px);

    opacity:.9;

}