/* OAV Som & Luzes
   Área Entretenimento - OAV CENTER
*/

:root{
    --sl-bg:#030612;
    --sl-bg-soft:#080d1e;
    --sl-surface:#0b1228;
    --sl-surface-2:#101933;
    --sl-line:rgba(79,190,255,.20);
    --sl-text:#f4f8ff;
    --sl-muted:#9aaac2;
    --sl-cyan:#19d3ff;
    --sl-blue:#247cff;
    --sl-purple:#9a4dff;
    --sl-pink:#e449e8;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    color:var(--sl-text);
    background:var(--sl-bg);
}

.sl-wrap{
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
}

.sl-eyebrow{
    display:inline-block;
    margin-bottom:14px;
    color:var(--sl-cyan);
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

/* HERO */

.sl-hero{
    position:relative;
    overflow:hidden;
    min-height:690px;
    display:flex;
    align-items:center;
    padding:90px 0;
    background:
        radial-gradient(circle at 78% 18%,rgba(154,77,255,.25),transparent 28%),
        radial-gradient(circle at 18% 35%,rgba(25,211,255,.18),transparent 30%),
        linear-gradient(135deg,#02040b 0%,#071025 52%,#050716 100%);
}

.sl-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.32;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,#000,transparent 92%);
}

.sl-hero::after{
    content:"";
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-170px;
    height:320px;
    background:radial-gradient(ellipse at center,rgba(36,124,255,.18),transparent 65%);
    filter:blur(15px);
}

.sl-hero__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
    gap:75px;
    align-items:center;
}

.sl-hero__content h1{
    margin:0;
    max-width:720px;
    font-size:clamp(52px,7vw,92px);
    line-height:.92;
    letter-spacing:-.045em;
    text-transform:uppercase;
}

.sl-hero__content h1 strong{
    display:block;
    font-weight:900;
    color:transparent;
    background:linear-gradient(90deg,var(--sl-cyan),#6f93ff 45%,#c25cff);
    -webkit-background-clip:text;
    background-clip:text;
    filter:drop-shadow(0 0 26px rgba(36,124,255,.28));
}

.sl-lead{
    margin:27px 0 8px!important;
    color:#fff!important;
    font-size:clamp(22px,3vw,32px)!important;
    font-weight:800;
}

.sl-hero__content>p{
    max-width:680px;
    margin:0;
    color:var(--sl-muted);
    font-size:17px;
    line-height:1.75;
}

.sl-actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:33px;
}

.sl-button{
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border:1px solid transparent;
    border-radius:9px;
    color:#02101c;
    background:linear-gradient(135deg,var(--sl-cyan),#57a6ff);
    box-shadow:0 12px 30px rgba(25,211,255,.15);
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    transition:.22s ease;
}

.sl-button:hover{
    transform:translateY(-2px);
    box-shadow:0 17px 36px rgba(25,211,255,.25);
}

.sl-button.is-secondary{
    color:#fff;
    border-color:rgba(255,255,255,.19);
    background:rgba(255,255,255,.045);
    box-shadow:none;
}

.sl-button.is-secondary:hover{
    border-color:var(--sl-cyan);
    background:rgba(25,211,255,.08);
}

/* HERO VISUAL */

.sl-hero__visual{
    display:flex;
    justify-content:center;
    perspective:900px;
}

.sl-stage{
    position:relative;
    width:min(100%,470px);
    aspect-ratio:1/1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(94,176,255,.18);
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(23,41,84,.88) 0 41%,rgba(7,13,32,.92) 42% 58%,rgba(2,5,15,.92) 59%);
    box-shadow:
        0 0 0 18px rgba(38,105,255,.025),
        0 0 90px rgba(36,124,255,.20),
        inset 0 0 70px rgba(25,211,255,.07);
    transform:rotateY(-7deg) rotateX(3deg);
}

.sl-stage::before,
.sl-stage::after{
    content:"";
    position:absolute;
    width:170%;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--sl-cyan),transparent);
    opacity:.32;
    box-shadow:0 0 25px var(--sl-cyan);
}

.sl-stage::before{
    transform:rotate(35deg);
}

.sl-stage::after{
    transform:rotate(-35deg);
    background:linear-gradient(90deg,transparent,var(--sl-purple),transparent);
    box-shadow:0 0 25px var(--sl-purple);
}

.sl-record{
    position:relative;
    z-index:2;
    width:205px;
    height:205px;
    display:grid;
    place-items:center;
    border:9px solid #17254b;
    border-radius:50%;
    color:#fff;
    background:
        radial-gradient(circle,#1ba8ca 0 12%,#07101e 13% 19%,#151827 20% 26%,#05070c 27%);
    box-shadow:
        0 0 0 4px #080b14,
        0 0 40px rgba(25,211,255,.25);
    font-size:56px;
    font-weight:1000;
    letter-spacing:-.11em;
    text-indent:-.11em;
}

.sl-record::after{
    content:"";
    position:absolute;
    inset:16px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    box-shadow:
        0 0 0 8px rgba(255,255,255,.025),
        0 0 0 17px rgba(255,255,255,.02),
        0 0 0 27px rgba(255,255,255,.017);
}

.sl-equalizer{
    position:relative;
    z-index:3;
    height:42px;
    display:flex;
    gap:6px;
    align-items:end;
    margin-top:-18px;
}

.sl-equalizer span{
    width:7px;
    border-radius:6px 6px 1px 1px;
    background:linear-gradient(to top,var(--sl-purple),var(--sl-cyan));
    box-shadow:0 0 11px rgba(25,211,255,.45);
}

.sl-equalizer span:nth-child(1){height:19px}
.sl-equalizer span:nth-child(2){height:32px}
.sl-equalizer span:nth-child(3){height:42px}
.sl-equalizer span:nth-child(4){height:27px}
.sl-equalizer span:nth-child(5){height:15px}

.sl-stage>strong{
    position:relative;
    z-index:2;
    margin-top:15px;
    font-size:29px;
    letter-spacing:.1em;
}

.sl-stage>small{
    position:relative;
    z-index:2;
    margin-top:6px;
    color:var(--sl-cyan);
    font-weight:900;
    letter-spacing:.38em;
}

/* SEÇÕES */

.sl-section{
    padding:95px 0;
    background:#070b17;
}

.sl-section:nth-of-type(even){
    background:#050814;
}

.sl-section.is-dark{
    position:relative;
    background:
        radial-gradient(circle at 20% 10%,rgba(25,211,255,.08),transparent 32%),
        radial-gradient(circle at 85% 80%,rgba(154,77,255,.10),transparent 34%),
        #030610;
}

.sl-section h2,
.sl-cta h2{
    max-width:800px;
    margin:0;
    color:#fff;
    font-size:clamp(34px,4.5vw,57px);
    line-height:1.05;
    letter-spacing:-.035em;
}

.sl-intro{
    max-width:780px;
    margin:19px 0 0;
    color:var(--sl-muted);
    font-size:16px;
    line-height:1.75;
}

/* SERVIÇOS */

.sl-services{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
    margin-top:48px;
}

.sl-services article{
    position:relative;
    overflow:hidden;
    min-height:260px;
    padding:27px 23px;
    border:1px solid var(--sl-line);
    border-radius:15px;
    background:
        linear-gradient(145deg,rgba(16,25,51,.95),rgba(5,10,25,.95));
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    transition:.25s ease;
}

.sl-services article::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:3px;
    background:linear-gradient(90deg,var(--sl-cyan),var(--sl-blue),var(--sl-purple));
}

.sl-services article:hover{
    transform:translateY(-7px);
    border-color:rgba(25,211,255,.42);
    box-shadow:0 25px 55px rgba(0,0,0,.30);
}

.sl-services article>span{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin-bottom:24px;
    border:1px solid rgba(25,211,255,.24);
    border-radius:13px;
    color:var(--sl-cyan);
    background:rgba(25,211,255,.06);
    font-size:21px;
    font-weight:900;
}

.sl-services h3{
    margin:0 0 11px;
    color:#fff;
    font-size:18px;
    line-height:1.25;
}

.sl-services p{
    margin:0;
    color:var(--sl-muted);
    font-size:13px;
    line-height:1.65;
}

/* ETAPAS */

.sl-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:47px;
}

.sl-features article{
    position:relative;
    padding:32px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.sl-features b{
    display:block;
    margin-bottom:29px;
    color:var(--sl-cyan);
    font-size:34px;
    line-height:1;
}

.sl-features h3{
    margin:0 0 9px;
    color:#fff;
    font-size:22px;
}

.sl-features p{
    margin:0;
    color:var(--sl-muted);
    line-height:1.65;
}

/* PORTFÓLIO */

.sl-portfolio{
    background:#071020;
}

.sl-portfolio__placeholder{
    margin-top:43px;
    min-height:250px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    padding:38px;
    border:1px dashed rgba(25,211,255,.32);
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(25,211,255,.035),rgba(154,77,255,.045));
}

.sl-portfolio__placeholder>span{
    flex:0 0 76px;
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#04111e;
    background:linear-gradient(135deg,var(--sl-cyan),#738dff);
    font-size:34px;
    font-weight:900;
    box-shadow:0 0 35px rgba(25,211,255,.16);
}

.sl-portfolio__placeholder h3{
    margin:0 0 8px;
    color:#fff;
    font-size:24px;
}

.sl-portfolio__placeholder p{
    max-width:640px;
    margin:0;
    color:var(--sl-muted);
    line-height:1.65;
}

/* CTA */

.sl-cta{
    width:min(1180px,calc(100% - 40px));
    margin:75px auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding:48px;
    border:1px solid rgba(25,211,255,.25);
    border-radius:18px;
    background:
        radial-gradient(circle at 90% 15%,rgba(154,77,255,.18),transparent 35%),
        linear-gradient(135deg,#0a1732,#070b19);
    box-shadow:0 25px 60px rgba(0,0,0,.23);
}

.sl-cta h2{
    max-width:720px;
}

.sl-cta p{
    max-width:670px;
    margin:13px 0 0;
    color:var(--sl-muted);
    line-height:1.7;
}

.sl-cta>.sl-button{
    flex:0 0 auto;
}

/* RESPONSIVO */

@media(max-width:1100px){
    .sl-hero__grid{
        grid-template-columns:1fr 390px;
        gap:40px;
    }

    .sl-services{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:850px){
    .sl-hero{
        min-height:auto;
        padding:72px 0;
    }

    .sl-hero__grid{
        grid-template-columns:1fr;
    }

    .sl-hero__content{
        text-align:center;
    }

    .sl-hero__content>p{
        margin-inline:auto;
    }

    .sl-actions{
        justify-content:center;
    }

    .sl-hero__visual{
        margin-top:20px;
    }

    .sl-stage{
        width:min(430px,88vw);
    }

    .sl-services{
        grid-template-columns:repeat(2,1fr);
    }

    .sl-features{
        grid-template-columns:1fr;
    }

    .sl-cta{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:560px){
    .sl-wrap,
    .sl-cta{
        width:min(100% - 28px,1180px);
    }

    .sl-hero{
        padding:58px 0;
    }

    .sl-hero__content h1{
        font-size:48px;
    }

    .sl-services{
        grid-template-columns:1fr;
    }

    .sl-section{
        padding:70px 0;
    }

    .sl-stage{
        width:310px;
    }

    .sl-record{
        width:150px;
        height:150px;
        font-size:42px;
    }

    .sl-stage>strong{
        font-size:22px;
    }

    .sl-portfolio__placeholder{
        text-align:center;
        flex-direction:column;
    }

    .sl-cta{
        margin:45px auto;
        padding:30px 24px;
    }

    .sl-cta>.sl-button{
        width:100%;
    }
}

/* phase-sl-hero-image */
.sl-hero__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:520px;
}

.sl-hero__image{
    position:relative;
    z-index:2;
    display:block;
    width:min(100%,620px);
    max-height:560px;
    object-fit:contain;
    filter:
        drop-shadow(0 0 24px rgba(25,211,255,.20))
        drop-shadow(0 0 46px rgba(154,77,255,.16));
    transform:scale(1.04);
}

.sl-hero__visual::before{
    content:"";
    position:absolute;
    inset:8% -7% 2%;
    border-radius:50%;
    background:
        radial-gradient(circle at 35% 35%,rgba(25,211,255,.18),transparent 35%),
        radial-gradient(circle at 72% 55%,rgba(154,77,255,.20),transparent 40%);
    filter:blur(35px);
    pointer-events:none;
}

@media(max-width:850px){
    .sl-hero__visual{
        min-height:auto;
    }

    .sl-hero__image{
        width:min(100%,560px);
        transform:none;
    }
}

/* phase-sl-hero-immersive */
.sl-hero{
    overflow:hidden;
}

.sl-hero__grid{
    grid-template-columns:minmax(0,0.9fr) minmax(520px,1.25fr);
    gap:42px;
    align-items:center;
}

.sl-hero__visual{
    min-height:560px;
    margin-right:-70px;
}

.sl-hero__image{
    width:min(112%,760px);
    max-height:620px;
    object-fit:cover;
    object-position:center;
    border-radius:0;
    box-shadow:none;
    -webkit-mask-image:linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.45) 6%,
        #000 18%,
        #000 100%
    );
    mask-image:linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.45) 6%,
        #000 18%,
        #000 100%
    );
}

@media(max-width:1100px){
    .sl-hero__grid{
        grid-template-columns:1fr 1fr;
        gap:28px;
    }

    .sl-hero__visual{
        margin-right:-30px;
    }
}

@media(max-width:850px){
    .sl-hero__grid{
        grid-template-columns:1fr;
    }

    .sl-hero__visual{
        margin-right:0;
        min-height:auto;
    }

    .sl-hero__image{
        width:100%;
        max-height:none;
        object-fit:contain;
        -webkit-mask-image:none;
        mask-image:none;
    }
}

/* phase-sl-top5 */
.sl-top5{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 20%,rgba(25,211,255,.10),transparent 35%),
        radial-gradient(circle at 85% 70%,rgba(154,77,255,.13),transparent 38%),
        #050916;
    border-top:1px solid rgba(25,211,255,.16);
    border-bottom:1px solid rgba(154,77,255,.18);
}

.sl-top5__header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:26px;
}

.sl-top5__header h2 strong{
    background:linear-gradient(90deg,#19d3ff,#7d8cff,#d84cff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.sl-top5__badge{
    min-width:92px;
    min-height:92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(25,211,255,.65);
    border-radius:20px;
    background:
        linear-gradient(145deg,rgba(25,211,255,.10),rgba(154,77,255,.12));
    box-shadow:
        0 0 28px rgba(25,211,255,.12),
        inset 0 0 24px rgba(154,77,255,.06);
    color:#dff9ff;
    font-weight:800;
    line-height:1;
}

.sl-top5__badge strong{
    font-size:42px;
    color:#19d3ff;
    text-shadow:0 0 18px rgba(25,211,255,.45);
}

.sl-top5__list{
    display:grid;
    gap:12px;
}

.sl-track{
    display:grid;
    grid-template-columns:52px 58px minmax(0,1fr) 48px;
    align-items:center;
    gap:16px;
    padding:12px 15px;
    border:1px solid rgba(72,142,255,.20);
    border-radius:14px;
    background:
        linear-gradient(90deg,rgba(6,16,34,.92),rgba(14,11,35,.86));
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.sl-track:hover{
    transform:translateY(-2px);
    border-color:rgba(25,211,255,.55);
    box-shadow:
        0 10px 30px rgba(0,0,0,.24),
        0 0 22px rgba(25,211,255,.08);
}

.sl-track>b{
    font-size:24px;
    color:#5f7594;
    font-weight:900;
    letter-spacing:-1px;
}

.sl-track__cover{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:12px;
    border:1px solid rgba(25,211,255,.38);
    background:
        radial-gradient(circle at 35% 35%,rgba(25,211,255,.28),transparent 35%),
        linear-gradient(135deg,#07192d,#21113c);
    color:#fff;
    font-size:25px;
    box-shadow:inset 0 0 20px rgba(154,77,255,.12);
}

.sl-track__info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sl-track__info strong{
    color:#f7fbff;
    font-size:16px;
}

.sl-track__info span{
    color:#8fa7bf;
    font-size:13px;
}

.sl-track__play{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid #19d3ff;
    background:rgba(25,211,255,.08);
    color:#19d3ff;
    cursor:pointer;
    font-size:16px;
    transition:.2s ease;
}

.sl-track__play:hover{
    color:#fff;
    background:linear-gradient(135deg,#19d3ff,#7d63ff);
    box-shadow:0 0 20px rgba(25,211,255,.32);
}

@media(max-width:700px){
    .sl-top5__header{
        align-items:flex-start;
    }

    .sl-top5__badge{
        min-width:72px;
        min-height:72px;
    }

    .sl-top5__badge strong{
        font-size:32px;
    }

    .sl-track{
        grid-template-columns:36px 50px minmax(0,1fr) 42px;
        gap:10px;
        padding:10px;
    }

    .sl-track__cover{
        width:50px;
        height:50px;
    }

    .sl-track>b{
        font-size:18px;
    }
}

/* phase-sl-kits */
.sl-kits{
    position:relative;
    background:
        radial-gradient(circle at 10% 15%,rgba(25,211,255,.08),transparent 30%),
        radial-gradient(circle at 90% 85%,rgba(154,77,255,.10),transparent 35%),
        #040814;
}

.sl-kits__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-top:30px;
}

.sl-kit{
    position:relative;
    overflow:hidden;
    padding:20px;
    border:1px solid rgba(73,142,255,.22);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(7,17,37,.96),rgba(18,11,39,.92));
    box-shadow:
        0 18px 40px rgba(0,0,0,.22),
        inset 0 1px rgba(255,255,255,.025);
}

.sl-kit::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:2px;
    background:linear-gradient(90deg,#19d3ff,#7d63ff,#d84cff);
    opacity:.75;
}

.sl-kit__header{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:16px;
}

.sl-kit__header>span{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    border:1px solid rgba(25,211,255,.45);
    background:rgba(25,211,255,.08);
    color:#19d3ff;
    font-weight:900;
}

.sl-kit__header h3{
    margin:0;
    color:#fff;
    font-size:21px;
}

.sl-kit__gallery{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-bottom:17px;
}

.sl-kit__photo{
    position:relative;
    min-height:118px;
    overflow:hidden;
    display:grid;
    place-items:center;
    border:1px solid rgba(74,145,255,.20);
    border-radius:12px;
    background:
        radial-gradient(circle at 35% 30%,rgba(25,211,255,.16),transparent 32%),
        radial-gradient(circle at 70% 75%,rgba(154,77,255,.18),transparent 38%),
        linear-gradient(145deg,#071426,#140d28);
    color:#7891aa;
    cursor:pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.sl-kit__photo::after{
    content:"＋";
    position:absolute;
    right:9px;
    bottom:7px;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(3,8,20,.78);
    border:1px solid rgba(25,211,255,.45);
    color:#19d3ff;
    font-size:17px;
}

.sl-kit__photo:hover{
    transform:scale(1.015);
    border-color:rgba(25,211,255,.62);
    box-shadow:0 0 20px rgba(25,211,255,.10);
}

.sl-kit__photo span{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.sl-kit>p{
    min-height:64px;
    color:#9db0c4;
    line-height:1.55;
}

.sl-kit .sl-button{
    width:100%;
    justify-content:center;
    text-align:center;
}

@media(max-width:850px){
    .sl-kits__grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:520px){
    .sl-kit{
        padding:15px;
    }

    .sl-kit__photo{
        min-height:95px;
    }
}

/* phase-sl-kits-placeholder */
.sl-kit__photo{
    padding:0;
}

.sl-kit__photo img{
    display:block;
    width:100%;
    height:100%;
    min-height:118px;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:transform .25s ease;
}

.sl-kit__photo:hover img{
    transform:scale(1.04);
}

@media(max-width:520px){
    .sl-kit__photo img{
        min-height:95px;
    }
}

/* phase-sl-lightbox */
body.sl-lightbox-open{
    overflow:hidden;
}

.sl-lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.sl-lightbox.is-open{
    display:flex;
}

.sl-lightbox__backdrop{
    position:absolute;
    inset:0;
    background:rgba(1,4,12,.92);
    backdrop-filter:blur(8px);
}

.sl-lightbox__dialog{
    position:relative;
    z-index:2;
    width:min(96vw,1100px);
    max-height:92vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px 72px 42px;
    border:1px solid rgba(25,211,255,.28);
    border-radius:22px;
    background:
        radial-gradient(circle at 20% 20%,rgba(25,211,255,.08),transparent 30%),
        radial-gradient(circle at 80% 80%,rgba(154,77,255,.10),transparent 35%),
        #050916;
    box-shadow:
        0 0 45px rgba(25,211,255,.10),
        0 0 80px rgba(154,77,255,.10),
        0 30px 80px rgba(0,0,0,.55);
}

.sl-lightbox__figure{
    margin:0;
    width:100%;
    text-align:center;
}

.sl-lightbox__figure img{
    display:block;
    margin:0 auto;
    max-width:100%;
    max-height:72vh;
    object-fit:contain;
    border-radius:14px;
    box-shadow:0 18px 55px rgba(0,0,0,.45);
}

.sl-lightbox__figure figcaption{
    margin-top:14px;
    color:#9db0c4;
    font-size:14px;
}

.sl-lightbox__close{
    position:absolute;
    top:14px;
    right:16px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(25,211,255,.42);
    background:rgba(5,9,22,.88);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    transition:.2s ease;
}

.sl-lightbox__close:hover{
    background:#19d3ff;
    color:#03101a;
    box-shadow:0 0 20px rgba(25,211,255,.32);
}

.sl-lightbox__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:64px;
    border-radius:14px;
    border:1px solid rgba(25,211,255,.35);
    background:rgba(5,9,22,.82);
    color:#19d3ff;
    font-size:40px;
    line-height:1;
    cursor:pointer;
    transition:.2s ease;
}

.sl-lightbox__nav:hover{
    background:linear-gradient(135deg,#19d3ff,#7d63ff);
    color:#fff;
    box-shadow:0 0 22px rgba(25,211,255,.26);
}

.sl-lightbox__nav.is-prev{
    left:14px;
}

.sl-lightbox__nav.is-next{
    right:14px;
}

.sl-lightbox__counter{
    position:absolute;
    left:50%;
    bottom:13px;
    transform:translateX(-50%);
    padding:6px 12px;
    border-radius:999px;
    background:rgba(4,10,24,.82);
    border:1px solid rgba(25,211,255,.22);
    color:#9fc4d9;
    font-size:12px;
}

@media(max-width:700px){
    .sl-lightbox{
        padding:10px;
    }

    .sl-lightbox__dialog{
        width:100%;
        padding:58px 48px 44px;
        border-radius:16px;
    }

    .sl-lightbox__nav{
        width:38px;
        height:54px;
        font-size:32px;
    }

    .sl-lightbox__nav.is-prev{
        left:6px;
    }

    .sl-lightbox__nav.is-next{
        right:6px;
    }

    .sl-lightbox__figure img{
        max-height:68vh;
    }
}

/* phase-sl-top5-covers */
.sl-track__cover{
    overflow:hidden;
    border-radius:14px;
    aspect-ratio:1/1;
}

.sl-track__cover img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.sl-track.is-playing{
    border-color:rgba(34,211,238,.65);
    box-shadow:
        0 0 0 1px rgba(34,211,238,.20),
        0 0 28px rgba(34,211,238,.14);
}

.sl-track.is-playing .sl-track__play{
    transform:scale(1.06);
}

/* phase-sl-hero-whatsapp */
.sl-button--whatsapp{
    background:linear-gradient(135deg,#25d366,#16a34a);
    border-color:rgba(74,222,128,.75);
    color:#fff;
    box-shadow:
        0 10px 28px rgba(37,211,102,.20),
        0 0 18px rgba(37,211,102,.12);
}

.sl-button--whatsapp:hover{
    background:linear-gradient(135deg,#2ee66f,#22c55e);
    border-color:#86efac;
    box-shadow:
        0 12px 32px rgba(37,211,102,.30),
        0 0 24px rgba(37,211,102,.18);
}

.sl-hero__contact{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:18px;
}

.sl-hero__contact strong{
    color:#fff;
    font-size:1.15rem;
    letter-spacing:.02em;
}

.sl-hero__contact span{
    color:rgba(226,232,240,.68);
    font-size:.82rem;
}

@media(max-width:640px){
    .sl-hero__contact{
        align-items:flex-start;
        margin-top:15px;
    }
}

/* phase-sl-top5-play-counter */
.sl-track__info .sl-track__plays{
    display:inline-flex;
    align-items:center;
    gap:5px;
    width:max-content;
    margin-top:2px;
    padding:3px 8px;
    border:1px solid rgba(25,211,255,.20);
    border-radius:999px;
    background:rgba(25,211,255,.06);
    color:#8fa7bf;
    font-size:11px;
    line-height:1.2;
}

.sl-track__info .sl-track__plays::before{
    content:"♫";
    color:#19d3ff;
    font-size:11px;
}

.sl-track__info .sl-track__plays-count{
    color:#19d3ff;
    font-size:11px;
    font-weight:700;
}

/* =========================================================
   OAV SOM & LUZES
   Cards comerciais dos kits
   ========================================================= */

.sl-kits__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.sl-kit{
    display:flex;
    flex-direction:column;
    padding:16px;
    border-radius:16px;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.sl-kit:hover{
    transform:translateY(-5px);
    border-color:rgba(25,211,255,.42);
    box-shadow:
        0 22px 48px rgba(0,0,0,.34),
        0 0 26px rgba(25,211,255,.07);
}

.sl-kit__header{
    margin-bottom:13px;
}

.sl-kit__header>span{
    width:36px;
    height:36px;
    flex-basis:36px;
    border-radius:10px;
    font-size:13px;
}

.sl-kit__header h3{
    font-size:19px;
    text-transform:uppercase;
    letter-spacing:.025em;
}

/*
 * No card mostramos somente a primeira foto.
 * As outras continuam no HTML para a futura galeria
 * individual de cada kit.
 */
.sl-kit__gallery{
    display:block;
    margin-bottom:15px;
}

.sl-kit__photo{
    display:none;
}

.sl-kit__photo:first-child{
    display:block;
    width:100%;
    min-height:0;
    aspect-ratio:4/3;
    border-radius:12px;
}

.sl-kit__photo:first-child img{
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:4/3;
    object-fit:cover;
}

.sl-kit__photo:first-child::after{
    content:"＋";
    right:10px;
    bottom:10px;
}

.sl-kit>p{
    flex:1;
    min-height:0;
    margin:0 0 17px;
    font-size:14px;
    line-height:1.55;
}

.sl-kit .sl-button{
    margin-top:auto;
    min-height:44px;
}

@media(max-width:1100px){
    .sl-kits__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:650px){
    .sl-kits__grid{
        grid-template-columns:1fr;
    }

    .sl-kit{
        padding:15px;
    }

    .sl-kit__photo:first-child{
        aspect-ratio:16/10;
    }

    .sl-kit__photo:first-child img{
        aspect-ratio:16/10;
    }
}


/* =========================================================
   HERO V2 - OAV SOM & LUZES
   Inspirado no novo conceito visual aprovado
   ========================================================= */

.sl-hero.sl-hero--showcase{
    min-height:0;
    padding:46px 0 34px;
    background:
        radial-gradient(circle at 76% 22%,rgba(126,58,242,.24),transparent 31%),
        radial-gradient(circle at 33% 40%,rgba(0,210,255,.13),transparent 30%),
        linear-gradient(105deg,#020812 0%,#03101d 43%,#07071b 100%);
    border-top:1px solid rgba(25,211,255,.24);
    border-bottom:1px solid rgba(25,211,255,.20);
}

.sl-hero--showcase .sl-wrap{
    width:min(1380px,calc(100% - 48px));
}

.sl-hero--showcase .sl-hero__grid{
    grid-template-columns:minmax(360px,.78fr) minmax(560px,1.22fr);
    gap:20px;
    align-items:center;
}

.sl-hero--showcase .sl-hero__content{
    position:relative;
    z-index:4;
    padding:12px 0 18px;
}

.sl-hero--showcase .sl-eyebrow{
    margin-bottom:10px;
    font-size:12px;
    letter-spacing:.20em;
}

.sl-hero--showcase .sl-hero__content h1{
    max-width:600px;
    font-size:clamp(48px,5.8vw,82px);
    line-height:.88;
}

.sl-hero--showcase .sl-lead{
    margin:18px 0 8px!important;
    font-size:clamp(22px,2.4vw,31px)!important;
}

.sl-hero--showcase .sl-hero__content>p:not(.sl-lead){
    max-width:610px;
    font-size:16px;
    line-height:1.55;
}

.sl-hero--showcase .sl-actions{
    margin-top:22px;
}

.sl-hero--showcase .sl-button{
    min-height:50px;
    padding:0 24px;
}

.sl-hero--showcase .sl-hero__contact{
    margin-top:16px;
}

.sl-hero--showcase .sl-hero__visual{
    min-height:430px;
    margin-right:-30px;
}

.sl-hero--showcase .sl-hero__image{
    width:min(110%,820px);
    max-height:500px;
    object-fit:contain;
    transform:scale(1.06);
    filter:
        drop-shadow(0 0 24px rgba(25,211,255,.23))
        drop-shadow(0 0 48px rgba(154,77,255,.18));
}

@media(max-width:1050px){
    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:minmax(320px,.9fr) minmax(430px,1.1fr);
    }

    .sl-hero--showcase .sl-hero__visual{
        min-height:380px;
        margin-right:-20px;
    }
}

@media(max-width:850px){
    .sl-hero.sl-hero--showcase{
        padding:42px 0 32px;
    }

    .sl-hero--showcase .sl-wrap{
        width:min(100% - 32px,700px);
    }

    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .sl-hero--showcase .sl-hero__content{
        text-align:center;
    }

    .sl-hero--showcase .sl-hero__content>p{
        margin-left:auto;
        margin-right:auto;
    }

    .sl-hero--showcase .sl-actions{
        justify-content:center;
    }

    .sl-hero--showcase .sl-hero__contact{
        align-items:center;
    }

    .sl-hero--showcase .sl-hero__visual{
        min-height:0;
        margin-right:0;
    }

    .sl-hero--showcase .sl-hero__image{
        width:min(100%,650px);
        max-height:none;
        transform:none;
        -webkit-mask-image:none;
        mask-image:none;
    }
}

@media(max-width:520px){
    .sl-hero.sl-hero--showcase{
        padding:32px 0 26px;
    }

    .sl-hero--showcase .sl-hero__content h1{
        font-size:clamp(42px,15vw,62px);
    }

    .sl-hero--showcase .sl-actions{
        flex-direction:column;
    }

    .sl-hero--showcase .sl-actions .sl-button{
        width:100%;
    }
}


/* =========================================================
   FAIXA DE SERVIÇOS - HERO
   ========================================================= */

.sl-service-strip{
    position:relative;
    z-index:5;
    border-top:1px solid rgba(25,211,255,.18);
    border-bottom:1px solid rgba(25,211,255,.16);
    background:
        linear-gradient(
            90deg,
            rgba(2,10,20,.98),
            rgba(4,14,29,.98) 50%,
            rgba(7,8,25,.98)
        );
}

.sl-service-strip__grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.sl-service-strip article{
    position:relative;
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:15px 18px;
    text-align:left;
}

.sl-service-strip article:not(:last-child)::after{
    content:"";
    position:absolute;
    top:22%;
    right:0;
    width:1px;
    height:56%;
    background:rgba(255,255,255,.16);
}

.sl-service-strip__icon{
    min-width:36px;
    color:#fff;
    font-size:24px;
    font-weight:900;
    text-align:center;
    text-shadow:
        0 0 14px rgba(25,211,255,.45),
        0 0 24px rgba(154,77,255,.20);
}

.sl-service-strip article div{
    min-width:0;
}

.sl-service-strip strong{
    display:block;
    color:#fff;
    font-size:12px;
    font-weight:900;
    line-height:1.25;
    text-transform:uppercase;
}

.sl-service-strip small{
    display:block;
    margin-top:4px;
    color:rgba(194,211,229,.66);
    font-size:10px;
    line-height:1.25;
}

@media(max-width:1050px){
    .sl-service-strip__grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }

    .sl-service-strip article{
        flex-direction:column;
        gap:6px;
        padding:14px 8px;
        text-align:center;
    }

    .sl-service-strip strong{
        font-size:10px;
    }

    .sl-service-strip small{
        font-size:9px;
    }
}

@media(max-width:700px){
    .sl-service-strip__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sl-service-strip article{
        min-height:86px;
    }

    .sl-service-strip article::after{
        display:none;
    }

    .sl-service-strip article:last-child{
        grid-column:1 / -1;
    }
}


/* =========================================================
   OAV SOM & LUZES
   KITS V2 - 4 fotos visiveis por kit
   ========================================================= */

.sl-kits{
    padding-top:72px;
    padding-bottom:78px;
}

.sl-kits .sl-intro{
    max-width:820px;
}

.sl-kits__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-top:32px;
}

.sl-kit{
    display:flex;
    flex-direction:column;
    padding:16px;
    border-radius:18px;
    min-width:0;
}

.sl-kit__header{
    margin-bottom:14px;
}

.sl-kit__header>span{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:10px;
}

.sl-kit__header h3{
    font-size:18px;
    line-height:1.15;
    text-transform:uppercase;
    letter-spacing:.025em;
}

/* Sobrescreve o antigo modo de apenas uma foto */
.sl-kit .sl-kit__gallery{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-bottom:16px;
}

.sl-kit .sl-kit__photo,
.sl-kit .sl-kit__photo:first-child{
    display:grid;
    place-items:center;
    width:100%;
    min-height:0;
    aspect-ratio:16/10;
    border-radius:10px;
}

.sl-kit .sl-kit__photo img,
.sl-kit .sl-kit__photo:first-child img{
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:16/10;
    object-fit:cover;
}

.sl-kit .sl-kit__photo::after,
.sl-kit .sl-kit__photo:first-child::after{
    width:22px;
    height:22px;
    right:6px;
    bottom:6px;
    font-size:14px;
}

.sl-kit>p{
    flex:1;
    min-height:88px;
    margin:0 0 17px;
    font-size:13.5px;
    line-height:1.55;
}

.sl-kit .sl-button{
    width:100%;
    justify-content:center;
    margin-top:auto;
}

@media(max-width:1180px){
    .sl-kits__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sl-kit>p{
        min-height:64px;
    }
}

@media(max-width:650px){
    .sl-kits{
        padding-top:54px;
        padding-bottom:58px;
    }

    .sl-kits__grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .sl-kit>p{
        min-height:0;
    }

    .sl-kit .sl-kit__photo,
    .sl-kit .sl-kit__photo:first-child,
    .sl-kit .sl-kit__photo img,
    .sl-kit .sl-kit__photo:first-child img{
        aspect-ratio:16/10;
    }
}

/* spacing-v2 */
.sl-kits{
    padding-top:44px;
    padding-bottom:38px;
}

.sl-kits__grid{
    margin-top:22px;
}

.sl-top5{
    padding-top:42px;
    padding-bottom:52px;
}

@media(max-width:650px){
    .sl-kits{
        padding-top:36px;
        padding-bottom:34px;
    }

    .sl-top5{
        padding-top:36px;
        padding-bottom:44px;
    }
}

/* =========================================================
   HERO V3 - alinhamento geral + impacto visual
   ========================================================= */

.sl-hero.sl-hero--showcase{
    padding:34px 0 30px;
}

/* Mesmo eixo horizontal de Kits, TOP 5 e demais seções */
.sl-hero--showcase .sl-wrap{
    width:min(1180px,calc(100% - 40px));
}

/* Texto compacto + maior presença para a arte */
.sl-hero--showcase .sl-hero__grid{
    grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);
    gap:34px;
    align-items:center;
}

.sl-hero--showcase .sl-hero__content{
    padding:8px 0 12px;
}

.sl-hero--showcase .sl-hero__content h1{
    max-width:470px;
    font-size:clamp(48px,5.2vw,74px);
}

.sl-hero--showcase .sl-hero__lead{
    max-width:500px;
}

/* Remove compensações antigas que tiravam o hero do alinhamento */
.sl-hero--showcase .sl-hero__visual{
    min-height:430px;
    margin-right:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* A arte passa a ser o grande elemento de impacto */
.sl-hero--showcase .sl-hero__image{
    display:block;
    width:100%;
    max-width:720px;
    max-height:500px;
    object-fit:contain;
    transform:none;
    margin-left:auto;
    filter:
        drop-shadow(0 0 28px rgba(25,211,255,.24))
        drop-shadow(0 0 52px rgba(154,77,255,.20));
}

@media(max-width:1050px){
    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
        gap:24px;
    }

    .sl-hero--showcase .sl-hero__visual{
        min-height:390px;
    }
}

@media(max-width:850px){
    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .sl-hero--showcase .sl-hero__content{
        max-width:680px;
    }

    .sl-hero--showcase .sl-hero__visual{
        min-height:0;
        justify-content:center;
    }

    .sl-hero--showcase .sl-hero__image{
        width:min(100%,720px);
        margin-inline:auto;
    }
}

/* =========================================================
   HERO V4 - PALCO DE IMPACTO
   ========================================================= */

.sl-hero.sl-hero--showcase{
    position:relative;
    overflow:hidden;
    min-height:540px;
    padding:34px 0 28px;
    display:flex;
    align-items:center;
    background:
        radial-gradient(circle at 76% 42%,rgba(111,50,255,.30),transparent 31%),
        radial-gradient(circle at 57% 44%,rgba(0,205,255,.17),transparent 37%),
        linear-gradient(105deg,#020812 0%,#03111e 42%,#090720 100%);
}

/* brilho ambiente do palco */
.sl-hero.sl-hero--showcase::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(2,8,18,.98) 0%,
            rgba(2,10,20,.90) 30%,
            rgba(3,10,22,.38) 55%,
            rgba(7,5,25,.10) 100%
        );
    z-index:1;
}

.sl-hero.sl-hero--showcase::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:100px;
    pointer-events:none;
    background:linear-gradient(to top,rgba(2,8,18,.72),transparent);
    z-index:1;
}

.sl-hero--showcase .sl-wrap{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 40px));
}

/* composição do banner */
.sl-hero--showcase .sl-hero__grid{
    grid-template-columns:minmax(340px,.76fr) minmax(0,1.24fr);
    gap:16px;
    align-items:center;
}

/* TEXTO */

.sl-hero--showcase .sl-hero__content{
    position:relative;
    z-index:5;
    max-width:520px;
    padding:18px 0;
    text-shadow:0 2px 18px rgba(0,0,0,.55);
}

.sl-hero--showcase .sl-eyebrow{
    margin-bottom:12px;
}

.sl-hero--showcase .sl-hero__content h1{
    max-width:520px;
    margin:0;
    font-size:clamp(54px,5.5vw,80px);
    line-height:.88;
    letter-spacing:-.055em;
}

.sl-hero--showcase .sl-hero__content h1 strong{
    display:block;
}

.sl-hero--showcase .sl-lead{
    margin-top:18px;
    margin-bottom:10px;
    max-width:480px;
    font-size:clamp(19px,2vw,27px);
    line-height:1.12;
}

.sl-hero--showcase .sl-hero__content>p:not(.sl-lead){
    max-width:470px;
    line-height:1.6;
}

.sl-hero--showcase .sl-actions{
    margin-top:22px;
}

.sl-hero--showcase .sl-hero__contact{
    margin-top:16px;
}

/* ARTE / PALCO */

.sl-hero--showcase .sl-hero__visual{
    position:relative;
    z-index:2;
    min-height:470px;
    margin:0 -28px 0 -40px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* halo atrás da arte */
.sl-hero--showcase .sl-hero__visual::before{
    content:"";
    position:absolute;
    width:78%;
    height:78%;
    right:4%;
    top:11%;
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(0,213,255,.20),rgba(103,54,255,.13) 42%,transparent 70%);
    filter:blur(25px);
    pointer-events:none;
}

.sl-hero--showcase .sl-hero__image{
    position:relative;
    z-index:2;
    display:block;
    width:min(118%,820px);
    max-width:none;
    max-height:520px;
    margin:0;
    object-fit:contain;
    transform:scale(1.10);
    transform-origin:center right;
    filter:
        drop-shadow(0 0 24px rgba(25,211,255,.28))
        drop-shadow(0 0 58px rgba(154,77,255,.24));

    /* integra as bordas da arte ao fundo */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.72) 8%,
            #000 18%,
            #000 94%,
            rgba(0,0,0,.82) 100%
        );
    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.72) 8%,
            #000 18%,
            #000 94%,
            rgba(0,0,0,.82) 100%
        );
}

/* TABLET */

@media(max-width:1050px){
    .sl-hero.sl-hero--showcase{
        min-height:500px;
    }

    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:minmax(310px,.82fr) minmax(0,1.18fr);
        gap:10px;
    }

    .sl-hero--showcase .sl-hero__visual{
        min-height:420px;
        margin-left:-25px;
        margin-right:-15px;
    }

    .sl-hero--showcase .sl-hero__image{
        width:min(116%,720px);
        transform:scale(1.06);
    }
}

/* MOBILE */

@media(max-width:850px){
    .sl-hero.sl-hero--showcase{
        min-height:0;
        padding:44px 0 30px;
    }

    .sl-hero.sl-hero--showcase::before{
        background:
            linear-gradient(
                to bottom,
                rgba(2,8,18,.90),
                rgba(3,9,22,.55) 55%,
                rgba(5,5,22,.20)
            );
    }

    .sl-hero--showcase .sl-wrap{
        width:min(700px,calc(100% - 32px));
    }

    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .sl-hero--showcase .sl-hero__content{
        max-width:650px;
        margin-inline:auto;
        text-align:center;
    }

    .sl-hero--showcase .sl-hero__content>p{
        margin-left:auto;
        margin-right:auto;
    }

    .sl-hero--showcase .sl-actions{
        justify-content:center;
    }

    .sl-hero--showcase .sl-hero__contact{
        align-items:center;
    }

    .sl-hero--showcase .sl-hero__visual{
        min-height:0;
        margin:0;
        justify-content:center;
    }

    .sl-hero--showcase .sl-hero__image{
        width:min(100%,680px);
        max-height:none;
        margin-inline:auto;
        transform:none;
        -webkit-mask-image:none;
        mask-image:none;
    }
}

@media(max-width:520px){
    .sl-hero--showcase .sl-hero__content h1{
        font-size:clamp(46px,15vw,64px);
    }

    .sl-hero--showcase .sl-lead{
        font-size:20px;
    }
}

/* =========================================================
   HERO V4.1 - ARTE INTEGRADA AO PALCO
   ========================================================= */

@media(min-width:851px){

    .sl-hero.sl-hero--showcase{
        min-height:570px;
        padding:28px 0 24px;
    }

    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:minmax(390px,.88fr) minmax(0,1.12fr);
        gap:10px;
    }

    /* Texto ganha espaço e fica acima da transição da arte */
    .sl-hero--showcase .sl-hero__content{
        z-index:6;
        max-width:535px;
        padding:16px 0;
    }

    .sl-hero--showcase .sl-hero__content h1{
        max-width:535px;
        font-size:clamp(56px,5.25vw,78px);
        line-height:.90;
    }

    .sl-hero--showcase .sl-lead{
        max-width:500px;
    }

    .sl-hero--showcase .sl-hero__content>p:not(.sl-lead){
        max-width:490px;
    }

    /* A arte cresce, mas o alinhamento externo continua em 1180px */
    .sl-hero--showcase .sl-hero__visual{
        min-height:510px;
        margin-left:-18px;
        margin-right:-54px;
        overflow:visible;
        justify-content:flex-end;
    }

    .sl-hero--showcase .sl-hero__image{
        width:790px;
        max-width:none;
        max-height:555px;
        object-fit:contain;
        object-position:center right;

        transform:translateX(22px) scale(1.10);
        transform-origin:center right;

        filter:
            drop-shadow(0 0 32px rgba(0,210,255,.34))
            drop-shadow(0 0 72px rgba(140,61,255,.28));

        /*
         * A borda esquerda desaparece gradualmente.
         * Isso faz o palco se misturar com o fundo do hero.
         */
        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.12) 4%,
                rgba(0,0,0,.55) 10%,
                #000 21%,
                #000 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.12) 4%,
                rgba(0,0,0,.55) 10%,
                #000 21%,
                #000 100%
            );
    }

    /* Luz ciano/roxa espalhada para fora da própria imagem */
    .sl-hero--showcase .sl-hero__visual::before{
        width:105%;
        height:92%;
        right:-6%;
        top:4%;
        background:
            radial-gradient(
                ellipse at center,
                rgba(0,211,255,.23) 0%,
                rgba(79,78,255,.16) 38%,
                rgba(167,52,255,.11) 55%,
                transparent 73%
            );
        filter:blur(32px);
    }

    /*
     * Escurecimento apenas do lado esquerdo.
     * Mantém leitura do texto sem apagar o palco.
     */
    .sl-hero.sl-hero--showcase::before{
        background:
            linear-gradient(
                90deg,
                rgba(2,8,18,.99) 0%,
                rgba(2,9,19,.95) 25%,
                rgba(2,9,19,.76) 39%,
                rgba(3,8,20,.27) 55%,
                rgba(6,5,23,.03) 78%,
                transparent 100%
            );
    }
}

@media(min-width:851px) and (max-width:1050px){

    .sl-hero.sl-hero--showcase{
        min-height:520px;
    }

    .sl-hero--showcase .sl-hero__grid{
        grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);
    }

    .sl-hero--showcase .sl-hero__visual{
        min-height:455px;
        margin-left:-10px;
        margin-right:-30px;
    }

    .sl-hero--showcase .sl-hero__image{
        width:680px;
        max-height:500px;
        transform:translateX(15px) scale(1.06);
    }
}

/* =========================================================
   HERO V4.2 - FUSAO DO PALCO COM O FUNDO
   ========================================================= */

@media(min-width:851px){

    /*
     * Mantemos as proporções aprovadas da V4.1.
     * A alteração agora é somente na integração visual.
     */

    .sl-hero--showcase .sl-hero__visual{
        position:relative;

        /*
         * Dissolve uma faixa maior do lado esquerdo
         * do palco, eliminando a divisão vertical.
         */
        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.08) 5%,
                rgba(0,0,0,.28) 10%,
                rgba(0,0,0,.62) 17%,
                rgba(0,0,0,.90) 24%,
                #000 31%,
                #000 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.08) 5%,
                rgba(0,0,0,.28) 10%,
                rgba(0,0,0,.62) 17%,
                rgba(0,0,0,.90) 24%,
                #000 31%,
                #000 100%
            );
    }

    /*
     * A máscara agora pertence ao container.
     * Portanto a imagem em si volta a ficar inteira
     * dentro dessa área mascarada.
     */
    .sl-hero--showcase .sl-hero__image{
        -webkit-mask-image:none;
        mask-image:none;
    }

    /*
     * Névoa luminosa na região onde texto e palco
     * se encontram.
     */
    .sl-hero--showcase .sl-hero__visual::after{
        content:"";
        position:absolute;
        z-index:3;
        top:3%;
        bottom:3%;
        left:4%;
        width:34%;
        pointer-events:none;

        background:
            radial-gradient(
                ellipse at 65% 45%,
                rgba(0,208,255,.19) 0%,
                rgba(27,115,255,.11) 31%,
                rgba(91,52,220,.07) 48%,
                transparent 72%
            );

        filter:blur(18px);
    }

    /*
     * Iluminação geral do hero:
     * azul no encontro das duas áreas e roxo
     * no lado direito.
     */
    .sl-hero.sl-hero--showcase{
        background:
            radial-gradient(
                ellipse at 47% 48%,
                rgba(0,173,255,.13) 0%,
                transparent 32%
            ),
            radial-gradient(
                ellipse at 80% 38%,
                rgba(121,48,255,.25) 0%,
                transparent 36%
            ),
            linear-gradient(
                105deg,
                #020812 0%,
                #03101d 42%,
                #080720 100%
            );
    }

    /*
     * Escurecimento do texto com transição mais gradual.
     */
    .sl-hero.sl-hero--showcase::before{
        background:
            linear-gradient(
                90deg,
                rgba(2,8,18,.99) 0%,
                rgba(2,9,19,.95) 23%,
                rgba(2,10,20,.84) 34%,
                rgba(2,11,22,.58) 43%,
                rgba(3,10,23,.24) 53%,
                rgba(5,7,24,.06) 66%,
                transparent 82%
            );
    }
}


/* =========================================================
   CABECALHOS V1 - TITULOS CENTRALIZADOS
   ========================================================= */

/* KITS */
.sl-kits > .sl-wrap > .sl-eyebrow,
.sl-kits > .sl-wrap > h2,
.sl-kits > .sl-wrap > .sl-intro{
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.sl-kits > .sl-wrap > h2{
    max-width:850px;
}

.sl-kits > .sl-wrap > .sl-intro{
    max-width:780px;
}


/* TOP 5 */
.sl-top5__header{
    position:relative;
    display:block;
}

.sl-top5__header > div:first-child{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.sl-top5__header .sl-eyebrow{
    display:block;
    text-align:center;
}

.sl-top5__header h2{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    max-width:900px;
}

.sl-top5__header .sl-intro{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    max-width:760px;
}

.sl-top5__badge{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}


/* EXPERIENCIA */
.sl-section.is-dark > .sl-wrap > .sl-eyebrow,
.sl-section.is-dark > .sl-wrap > h2{
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.sl-section.is-dark > .sl-wrap > h2{
    max-width:900px;
}


/* PORTFOLIO */
.sl-portfolio > .sl-wrap > .sl-eyebrow,
.sl-portfolio > .sl-wrap > h2,
.sl-portfolio > .sl-wrap > .sl-intro{
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.sl-portfolio > .sl-wrap > h2{
    max-width:900px;
}

.sl-portfolio > .sl-wrap > .sl-intro{
    max-width:760px;
}


/* TOP 5 - evita conflito do selo em telas menores */
@media(max-width:850px){

    .sl-top5__badge{
        position:static;
        transform:none;
        margin:18px auto 0;
    }
}

/* =========================================================
   CTA ORCAMENTO PERSONALIZADO
   ========================================================= */

.sl-custom-quote{
    position:relative;
    padding:0 0 42px;
    background:#070b17;
}

.sl-custom-quote__box{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;

    padding:25px 30px;
    border:1px solid rgba(35,205,255,.28);
    border-radius:18px;

    background:
        radial-gradient(
            circle at 86% 50%,
            rgba(123,54,255,.18),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            rgba(8,25,43,.96),
            rgba(10,13,35,.96)
        );

    box-shadow:
        inset 0 0 28px rgba(0,201,255,.035),
        0 14px 40px rgba(0,0,0,.16);
}

.sl-custom-quote__box::before{
    content:"";
    position:absolute;
    left:0;
    top:18%;
    bottom:18%;
    width:3px;
    border-radius:3px;
    background:linear-gradient(
        180deg,
        #16d8ff,
        #8e52ff
    );
    box-shadow:0 0 16px rgba(22,216,255,.55);
}

.sl-custom-quote__content{
    position:relative;
    z-index:1;
    max-width:720px;
}

.sl-custom-quote .sl-eyebrow{
    display:block;
    margin-bottom:7px;
}

.sl-custom-quote h2{
    margin:0;
    color:#fff;
    font-size:clamp(24px,2.5vw,34px);
    line-height:1.08;
    letter-spacing:-.025em;
}

.sl-custom-quote p{
    max-width:680px;
    margin:10px 0 0;
    color:#a9c7df;
    line-height:1.55;
}

.sl-custom-quote__button{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    white-space:nowrap;
}

@media(max-width:850px){

    .sl-custom-quote{
        padding-bottom:36px;
    }

    .sl-custom-quote__box{
        flex-direction:column;
        align-items:flex-start;
        padding:24px;
    }

    .sl-custom-quote__button{
        width:100%;
        text-align:center;
    }
}


/* =========================================================
   PORTFOLIO V2 - GALERIA DE EVENTOS
   ========================================================= */

.sl-portfolio{
    background:
        radial-gradient(circle at 15% 20%,rgba(25,211,255,.055),transparent 30%),
        radial-gradient(circle at 88% 75%,rgba(154,77,255,.07),transparent 32%),
        #071020;
}

.sl-portfolio__gallery{
    display:grid;
    grid-template-columns:1.35fr .8fr .8fr;
    grid-template-rows:repeat(2,minmax(180px,1fr));
    gap:10px;
    margin-top:30px;
    min-height:470px;
}

.sl-portfolio__photo{
    position:relative;
    display:block;
    width:100%;
    min-width:0;
    min-height:0;
    padding:0;
    overflow:hidden;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:#0a1324;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.sl-portfolio__photo.is-featured{
    grid-row:1 / 3;
}

.sl-portfolio__photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .35s ease,
        filter .35s ease;
}

.sl-portfolio__photo::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(3,8,20,.25) 100%
        );
    transition:background .3s ease;
}

.sl-portfolio__photo:hover img{
    transform:scale(1.035);
    filter:brightness(1.08);
}

.sl-portfolio__photo:hover::after{
    background:
        linear-gradient(
            180deg,
            rgba(25,211,255,.035),
            rgba(3,8,20,.20)
        );
}

.sl-portfolio__photo:focus-visible{
    outline:2px solid var(--sl-cyan);
    outline-offset:3px;
}

@media(max-width:900px){
    .sl-portfolio__gallery{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:auto;
        min-height:0;
    }

    .sl-portfolio__photo,
    .sl-portfolio__photo.is-featured{
        grid-row:auto;
        aspect-ratio:16/10;
    }

    .sl-portfolio__photo.is-featured{
        grid-column:1 / -1;
        aspect-ratio:16/8;
    }
}

@media(max-width:600px){
    .sl-portfolio__gallery{
        grid-template-columns:1fr;
        gap:8px;
        margin-top:24px;
    }

    .sl-portfolio__photo,
    .sl-portfolio__photo.is-featured{
        grid-column:auto;
        aspect-ratio:16/10;
        border-radius:11px;
    }
}

/* =========================================================
   PORTFOLIO V3 - 1 DESTAQUE + 4 FOTOS
   ========================================================= */

@media(min-width:901px){

    .sl-portfolio__gallery{
        display:grid;
        grid-template-columns:
            minmax(0,1.08fr)
            minmax(0,.54fr)
            minmax(0,.54fr);
        grid-template-rows:repeat(2,minmax(0,1fr));
        gap:10px;
        min-height:470px;
    }

    .sl-portfolio__photo:nth-child(1){
        grid-column:1;
        grid-row:1 / 3;
    }

    .sl-portfolio__photo:nth-child(2){
        grid-column:2;
        grid-row:1;
    }

    .sl-portfolio__photo:nth-child(3){
        grid-column:3;
        grid-row:1;
    }

    .sl-portfolio__photo:nth-child(4){
        grid-column:2;
        grid-row:2;
    }

    .sl-portfolio__photo:nth-child(5){
        grid-column:3;
        grid-row:2;
    }

}

/* LUPA / ZOOM */

.sl-portfolio__photo::before{
    content:"";
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:3;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:50%;
    background:
        rgba(3,8,20,.72)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m16 16 4 4'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E")
        center/20px 20px no-repeat;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease;
}

.sl-portfolio__photo:hover::before{
    transform:scale(1.08);
    background-color:rgba(6,20,38,.90);
    border-color:rgba(25,211,255,.8);
}

@media(max-width:600px){
    .sl-portfolio__photo::before{
        right:10px;
        bottom:10px;
        width:36px;
        height:36px;
        background-size:17px 17px;
    }
}


/* =========================================================
   NOSSOS EVENTOS - DATA / SEM LUPA
   ========================================================= */

/* Remove definitivamente a lupa/zoom visual da galeria */
.sl-portfolio__photo::before{
    content:none !important;
    display:none !important;
}

/* Data discreta no canto inferior direito */
.sl-portfolio__date{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:4;

    display:inline-flex;
    align-items:center;

    padding:6px 10px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    color:rgba(255,255,255,.92);
    background:rgba(3,8,20,.72);

    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:.03em;

    box-shadow:0 5px 18px rgba(0,0,0,.28);
    backdrop-filter:blur(5px);

    pointer-events:none;
}

.sl-portfolio__photo.is-featured .sl-portfolio__date{
    right:16px;
    bottom:16px;
    padding:7px 11px;
    font-size:13px;
}

@media(max-width:600px){
    .sl-portfolio__date,
    .sl-portfolio__photo.is-featured .sl-portfolio__date{
        right:9px;
        bottom:9px;
        padding:5px 8px;
        font-size:11px;
    }
}

/* =========================================================
   NOSSOS EVENTOS - REACOES PUBLICAS
   ========================================================= */

.sl-portfolio__open{
    position:absolute;
    inset:0;
    z-index:1;

    display:block;
    width:100%;
    height:100%;
    padding:0;

    cursor:pointer;
    border:0;
    background:transparent;
}

.sl-portfolio__open img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Mantem a data acima da imagem */
.sl-portfolio__date{
    z-index:5;
}

/* Reacoes no canto inferior esquerdo */
.sl-portfolio__reactions{
    position:absolute;
    left:12px;
    bottom:12px;
    z-index:6;

    display:flex;
    align-items:center;
    gap:6px;
}

.sl-portfolio__reaction{
    min-width:44px;
    height:34px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    padding:0 9px;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;

    color:#fff;
    background:rgba(3,8,20,.76);

    font:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1;

    box-shadow:0 5px 18px rgba(0,0,0,.28);
    backdrop-filter:blur(5px);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.sl-portfolio__reaction:hover{
    transform:translateY(-1px);
    border-color:rgba(25,211,255,.70);
    background:rgba(8,24,44,.92);
}

.sl-portfolio__reaction.is-selected{
    border-color:rgba(25,211,255,.82);
    background:rgba(13,67,91,.92);
    box-shadow:
        0 5px 18px rgba(0,0,0,.28),
        0 0 16px rgba(25,211,255,.14);
}

.sl-portfolio__reaction:disabled{
    cursor:wait;
    opacity:.65;
    transform:none;
}

.sl-portfolio__reaction-count{
    min-width:9px;
    text-align:center;
}

/* O destaque principal pode usar controles um pouco maiores */
.sl-portfolio__photo.is-featured .sl-portfolio__reactions{
    left:16px;
    bottom:16px;
}

.sl-portfolio__photo.is-featured .sl-portfolio__reaction{
    height:36px;
    min-width:48px;
    font-size:14px;
}

@media(max-width:600px){
    .sl-portfolio__reactions,
    .sl-portfolio__photo.is-featured .sl-portfolio__reactions{
        left:9px;
        bottom:9px;
    }

    .sl-portfolio__reaction,
    .sl-portfolio__photo.is-featured .sl-portfolio__reaction{
        min-width:40px;
        height:32px;
        padding:0 7px;
        font-size:12px;
    }
}