/* ==========================================================
   ADRIOCLARO APP — HOME SECTION V700
   ========================================================== */

#adrc-app{
    position:relative;
    overflow:hidden;
    padding:92px 0 84px;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(74,94,170,.20),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 65%,
            rgba(38,65,130,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #02052d 0%,
            #07113d 48%,
            #020529 100%
        );
    color:#fff;
}

#adrc-app::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.025),
            transparent 40%,
            rgba(255,255,255,.018)
        );
    pointer-events:none;
}

#adrc-app::after{
    content:"";
    position:absolute;
    left:-5%;
    right:-5%;
    bottom:-88px;
    height:155px;
    border-radius:50%;
    background:#fff;
    transform:rotate(-1deg);
}

.adrc-app-container{
    position:relative;
    z-index:3;
    width:calc(100% - 40px);
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(430px,.95fr) minmax(0,1.05fr);
    align-items:center;
    gap:68px;
}


/* ==========================================================
   VISUAL / MOCKUPS
   ========================================================== */

.adrc-app-visual{
    position:relative;
    min-height:590px;
}

.adrc-app-phone{
    position:absolute;
    left:50%;
    top:50%;
    z-index:4;
    width:335px;
    aspect-ratio:9/18.8;
    transform:
        translate(-48%,-50%)
        rotate(-2.5deg);
    border-radius:54px;
    padding:10px;
    background:
        linear-gradient(
            135deg,
            #999,
            #101010 25%,
            #d2d2d2 51%,
            #111 78%,
            #888
        );
    box-shadow:
        0 34px 65px rgba(0,0,0,.43),
        0 8px 25px rgba(0,0,0,.27);
}

.adrc-app-phone-inner{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:46px;
    background:#fff;
}

.adrc-app-phone-top{
    position:absolute;
    z-index:3;
    top:14px;
    left:50%;
    width:96px;
    height:27px;
    border-radius:30px;
    transform:translateX(-50%);
    background:#050505;
}

.adrc-app-phone-screen{
    height:100%;
    padding:48px 18px 17px;
    background:#f6f8fb;
    color:#07113d;
}

.adrc-app-appbar{
    height:86px;
    margin:-48px -18px 18px;
    padding:43px 18px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#07113d;
    color:#fff;
    font-size:13px;
    font-weight:800;
}

.adrc-app-feature-image{
    height:170px;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:17px;
    background:
        linear-gradient(
            rgba(0,0,0,.08),
            rgba(0,0,0,.50)
        ),
        linear-gradient(
            135deg,
            #183f3f,
            #5f5a43
        );
    color:#fff;
    margin-bottom:20px;
}

.adrc-app-feature-image strong{
    display:block;
    font-size:19px;
}

.adrc-app-feature-image span{
    font-size:11px;
    opacity:.85;
}

.adrc-app-ui-title{
    font-size:20px;
    font-weight:800;
    margin-bottom:13px;
}

.adrc-app-ui-events{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:20px;
}

.adrc-app-ui-event{
    padding:12px;
    border-radius:13px;
    background:#fff;
    border:1px solid #e6e9f0;
}

.adrc-app-ui-event strong{
    display:block;
    font-size:12px;
    margin-bottom:3px;
}

.adrc-app-ui-event small{
    font-size:8.5px;
    color:#777d8d;
}

.adrc-app-ui-icons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.adrc-app-ui-icon{
    text-align:center;
}

.adrc-app-ui-icon i{
    width:45px;
    height:45px;
    margin:0 auto 6px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:#e9ecf2;
    font-style:normal;
    font-size:18px;
}

.adrc-app-ui-icon span{
    font-size:8px;
}


/* FLOATING CARDS */

.adrc-app-mini{
    position:absolute;
    z-index:2;
    width:215px;
    overflow:hidden;
    border-radius:25px;
    background:#fff;
    color:#07113d;
    box-shadow:0 28px 60px rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.30);
}

.adrc-app-mini-map{
    left:-3px;
    top:135px;
    transform:rotate(-6deg);
}

.adrc-app-mini-card{
    right:4px;
    top:145px;
    transform:rotate(4deg);
}

.adrc-app-mini-checkin{
    right:15px;
    bottom:65px;
    transform:rotate(4deg);
}

.adrc-app-mini-head{
    padding:13px 14px;
    font-size:11px;
    font-weight:800;
    border-bottom:1px solid #edf0f4;
}

.adrc-app-mini-body{
    padding:14px;
}

.adrc-app-map-area{
    height:140px;
    border-radius:12px;
    background:
        linear-gradient(
            45deg,
            #edf2e8,
            #dce9ec
        );
    position:relative;
    overflow:hidden;
}

.adrc-app-map-area::before,
.adrc-app-map-area::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:#2781f5;
}

.adrc-app-map-area::before{
    width:14px;
    height:14px;
    top:46px;
    left:80px;
}

.adrc-app-map-area::after{
    width:11px;
    height:11px;
    top:88px;
    right:42px;
}

.adrc-app-member{
    border-radius:14px;
    overflow:hidden;
    border:1px solid #e9ebf0;
}

.adrc-app-member-top{
    height:58px;
    background:#07113d;
}

.adrc-app-member-body{
    padding:14px;
    position:relative;
}

.adrc-app-member-body strong{
    display:block;
    font-size:13px;
    margin-bottom:4px;
}

.adrc-app-member-body span{
    display:block;
    font-size:9px;
    color:#888e9c;
}

.adrc-app-qr{
    position:absolute;
    right:14px;
    bottom:14px;
    width:47px;
    height:47px;
    background:
        repeating-linear-gradient(
            45deg,
            #111 0 3px,
            #fff 3px 6px
        );
}

.adrc-app-checkin-box{
    border-radius:13px;
    padding:14px;
    background:#102459;
    color:#fff;
}

.adrc-app-checkin-box strong{
    display:block;
    font-size:11px;
    margin-bottom:5px;
}

.adrc-app-checkin-box small{
    font-size:8.5px;
    opacity:.75;
}


/* ==========================================================
   COPY
   ========================================================== */

.adrc-app-copy{
    position:relative;
    z-index:5;
}

.adrc-app-eyebrow{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
    color:#cfd6f3;
    font-size:12px !important;
    letter-spacing:3px;
    font-weight:700;
}

.adrc-app-eyebrow::after{
    content:"";
    width:44px;
    height:1px;
    background:rgba(255,255,255,.6);
}

#adrc-app h2{
    max-width:650px;
    margin:0 0 22px;
    color:#fff !important;
    font-size:48px !important;
    line-height:1.07 !important;
    letter-spacing:-1.6px;
}

.adrc-app-lead{
    max-width:650px;
    margin:0 0 30px;
    color:rgba(255,255,255,.82);
    font-size:15.5px !important;
    line-height:1.7 !important;
}

.adrc-app-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 28px;
    margin-bottom:32px;
}

.adrc-app-feature{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:14px !important;
}

.adrc-app-feature i{
    flex:0 0 39px;
    width:39px;
    height:39px;
    border-radius:10px;
    display:grid;
    place-items:center;
    font-style:normal;
    font-size:17px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.17),
            rgba(255,255,255,.07)
        );
    border:1px solid rgba(255,255,255,.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 20px rgba(0,0,0,.11);
}

.adrc-app-stores{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:16px;
}

.adrc-store{
    min-width:205px;
    min-height:65px;
    padding:10px 16px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#050505;
    border:1px solid rgba(255,255,255,.35);
    color:#fff !important;
    text-decoration:none !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.adrc-store:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(0,0,0,.28);
}

.adrc-store-icon{
    font-size:29px;
    line-height:1;
}

.adrc-store-copy small{
    display:block;
    color:#fff;
    font-size:9px !important;
    line-height:1.1 !important;
    text-transform:uppercase;
}

.adrc-store-copy strong{
    display:block;
    color:#fff;
    margin-top:3px;
    font-size:20px !important;
    line-height:1 !important;
}

.adrc-app-search{
    display:flex;
    align-items:center;
    gap:9px;
    color:rgba(255,255,255,.72);
    font-size:12.5px !important;
}

.adrc-app-important{
    margin-top:24px;
    padding:18px 20px;
    border-radius:14px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
}

.adrc-app-important strong{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-size:12px;
    letter-spacing:.8px;
}

.adrc-app-important p{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:11.5px !important;
    line-height:1.65 !important;
}

.adrc-app-motto{
    position:relative;
    z-index:5;
    max-width:1180px;
    margin:62px auto -25px;
    padding:0 20px;
    text-align:center;
    color:#68708d;
    font-size:11px !important;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}


/* ==========================================================
   ANIMAÇÕES
   ========================================================== */

@keyframes adrcFloatPhone{
    0%,100%{
        transform:
            translate(-48%,-50%)
            rotate(-2.5deg)
            translateY(0);
    }

    50%{
        transform:
            translate(-48%,-50%)
            rotate(-2deg)
            translateY(-9px);
    }
}

@keyframes adrcFloatMap{
    0%,100%{
        transform:
            rotate(-6deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(-5deg)
            translateY(-7px);
    }
}

@keyframes adrcFloatCards{
    0%,100%{
        transform:
            rotate(4deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(3deg)
            translateY(-7px);
    }
}

.adrc-app-phone{
    animation:
        adrcFloatPhone 6s ease-in-out infinite;
}

.adrc-app-mini-map{
    animation:
        adrcFloatMap 7s ease-in-out infinite;
}

.adrc-app-mini-card,
.adrc-app-mini-checkin{
    animation:
        adrcFloatCards 6.5s ease-in-out infinite;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1050px){

    .adrc-app-container{
        grid-template-columns:1fr 1fr;
        gap:36px;
    }

    .adrc-app-visual{
        transform:scale(.88);
        transform-origin:center;
    }

    #adrc-app h2{
        font-size:40px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:820px){

    #adrc-app{
        padding:70px 0 95px;
    }

    .adrc-app-container{
        width:calc(100% - 28px);
        grid-template-columns:1fr;
        gap:20px;
    }

    .adrc-app-copy{
        order:1;
        text-align:left;
    }

    .adrc-app-visual{
        order:2;
        min-height:520px;
        transform:scale(.82);
        transform-origin:center top;
        margin-bottom:-80px;
    }

    #adrc-app h2{
        font-size:36px !important;
    }

    .adrc-app-lead{
        font-size:14px !important;
    }

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

    .adrc-app-stores{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .adrc-store{
        min-width:0;
    }

    .adrc-store-copy strong{
        font-size:16px !important;
    }

    .adrc-app-important{
        margin-top:18px;
    }

    .adrc-app-motto{
        margin-top:20px;
    }
}


@media(max-width:520px){

    #adrc-app h2{
        font-size:32px !important;
    }

    .adrc-app-eyebrow{
        font-size:10px !important;
    }

    .adrc-app-stores{
        grid-template-columns:1fr;
    }

    .adrc-app-visual{
        transform:scale(.69);
        min-height:480px;
        margin:
            0 -60px -140px;
    }

    .adrc-app-mini-map{
        left:-25px;
    }

    .adrc-app-mini-card{
        right:-20px;
    }

    .adrc-app-mini-checkin{
        right:-12px;
    }
}


@media(prefers-reduced-motion:reduce){

    .adrc-app-phone,
    .adrc-app-mini-map,
    .adrc-app-mini-card,
    .adrc-app-mini-checkin{
        animation:none !important;
    }
}


/* ==========================================================
   ADRIOCLARO APP — AJUSTE DE POSIÇÃO/BASE V710
   ========================================================== */

/*
Remove definitivamente a curva branca da base.
A próxima dobra começa em linha reta.
*/

#adrc-app::after{
    display:none !important;
    content:none !important;
}


/*
Ajusta o respiro inferior depois de retirar a onda.
*/

#adrc-app{
    padding-bottom:82px !important;
}


/*
O slogan permanece dentro da área azul,
sem encostar na próxima dobra.
*/

.adrc-app-motto{
    margin-top:58px !important;
    margin-bottom:0 !important;

    color:rgba(255,255,255,.48) !important;

    position:relative !important;
    z-index:5 !important;
}


/*
Garante corte perfeitamente reto.
*/

#adrc-app{
    clip-path:none !important;
    border-radius:0 !important;
}


/* MOBILE */

@media(max-width:820px){

    #adrc-app{
        padding-bottom:68px !important;
    }

    .adrc-app-motto{
        margin-top:35px !important;
    }
}