/*
=========================================================
D'ASCOLA TECH
assets/css/site.css
VERSÃO PREMIUM FINAL
=========================================================
*/

:root{
    --bg:#020713;
    --panel:#071426;
    --panel2:#0A1C35;
    --blue:#19B7FF;
    --blue2:#006DFF;
    --orange:#FF8A00;
    --text:#F4F8FF;
    --muted:#9DABC2;
    --line:rgba(255,255,255,.09);
    --radius:28px;
    --wrap:1240px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(25,183,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25,183,255,.045) 1px, transparent 1px),
        radial-gradient(circle at 20% 15%, rgba(25,183,255,.18), transparent 32%),
        radial-gradient(circle at 85% 35%, rgba(255,138,0,.12), transparent 30%);
    background-size:64px 64px,64px 64px,auto,auto;
    z-index:-3;
}

.dt-bg{
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        linear-gradient(120deg, transparent 0%, rgba(25,183,255,.08) 42%, transparent 62%),
        radial-gradient(circle at center, rgba(0,109,255,.08), transparent 55%);
}

.dt-bg::after{
    content:"";
    position:absolute;
    inset:-20%;
    background:linear-gradient(120deg, transparent 45%, rgba(25,183,255,.10), transparent 55%);
    animation:dt-scan 9s linear infinite;
}

@keyframes dt-scan{
    from{transform:translateX(-40%);}
    to{transform:translateX(40%);}
}

.dt-wrap{
    width:min(calc(100% - 48px), var(--wrap));
    margin:0 auto;
}

/* HEADER */

.dt-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:900;
    background:rgba(2,7,19,.76);
    backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line);
}

.dt-header .dt-wrap{
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.dt-brand{
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
    text-decoration:none;
}

.dt-brand img{
    width:56px;
    height:56px;
    border-radius:16px;
    object-fit:cover;
    box-shadow:0 0 34px rgba(25,183,255,.32);
}

.dt-brand h1{
    font-size:24px;
    line-height:1;
    letter-spacing:-.03em;
}

.dt-brand span{
    display:block;
    margin-top:5px;
    font-size:10px;
    letter-spacing:.22em;
    color:var(--muted);
}

.dt-header nav{
    display:flex;
    align-items:center;
    gap:34px;
}

.dt-header nav a{
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    transition:.25s ease;
}

.dt-header nav a:hover{
    color:#fff;
}

/* HERO */

.dt-hero{
    min-height:100vh;
    padding:150px 0 100px;
    display:flex;
    align-items:center;
}

.dt-hero .dt-wrap{
    display:grid;
    grid-template-columns:1fr 520px;
    gap:72px;
    align-items:center;
}

.dt-chip{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border:1px solid rgba(25,183,255,.28);
    border-radius:999px;
    background:rgba(25,183,255,.08);
    color:#DFF6FF;
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
}

.dt-left h2{
    margin-top:26px;
    max-width:760px;
    font-size:clamp(42px, 6vw, 76px);
    line-height:.98;
    letter-spacing:-.065em;
}

.dt-left p{
    margin-top:26px;
    max-width:620px;
    color:var(--muted);
    font-size:19px;
    line-height:1.75;
}

/* BOTÕES */

.dt-actions{
    margin-top:38px;
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.dt-btn,
.dt-link{
    min-height:56px;
    padding:0 30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    font-size:16px;
    font-weight:900;
    text-decoration:none;
    transition:.25s ease;
}

.dt-btn{
    background:linear-gradient(135deg, #00AFFF 0%, #007BFF 48%, #FF8A00 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:
        0 14px 38px rgba(0,136,255,.22),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.dt-link{
    background:rgba(255,255,255,.045);
    color:#EAF4FF;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.dt-btn:hover,
.dt-link:hover{
    transform:translateY(-3px);
    box-shadow:
        0 18px 50px rgba(0,136,255,.28),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.dt-link:hover{
    border-color:rgba(0,175,255,.35);
    color:#fff;
}

.dt-right{
    position:relative;
}

.dt-right::before{
    content:"";
    position:absolute;
    inset:8% -8% -8% 8%;
    border-radius:36px;
    background:linear-gradient(135deg, rgba(25,183,255,.35), rgba(255,138,0,.26));
    filter:blur(45px);
    opacity:.8;
}

.dt-hero-card{
    position:relative;
    width:100%;
    padding:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:32px;
    background:rgba(255,255,255,.04);
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 30px 110px rgba(0,0,0,.55);
}

.dt-hero-card img{
    width:100%;
    display:block;
    object-fit:cover;
    transition:.45s ease;
}

.dt-hero-card:hover img{
    transform:scale(1.025);
}

/* SECTION HEAD */

.dt-section-head{
    max-width:900px;
    margin-bottom:64px;
}

.dt-section-head h2{
    margin-top:14px;
    font-size:clamp(38px, 5vw, 62px);
    line-height:1.05;
    letter-spacing:-.06em;
}

.dt-section-head p{
    margin-top:18px;
    color:#AAB6CC;
    font-size:19px;
    line-height:1.9;
}

.dt-small{
    display:inline-flex;
    color:#7EDCFF;
    font-size:12px;
    font-weight:900;
    letter-spacing:.22em;
    text-transform:uppercase;
}

/* SERVICES */

.dt-services{
    position:relative;
    padding:140px 0;
}

.dt-services::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(25,183,255,.10), transparent 35%),
        radial-gradient(circle at 90% 10%, rgba(255,138,0,.08), transparent 30%);
    pointer-events:none;
}

.dt-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:26px;
}

.dt-grid article{
    position:relative;
    overflow:hidden;
    padding:42px 38px;
    min-height:390px;
    border-radius:34px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    transition:.45s;
}

.dt-grid article::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, var(--blue), var(--orange));
}

.dt-grid article:hover{
    transform:translateY(-12px);
    border-color:rgba(25,183,255,.28);
    box-shadow:0 40px 100px rgba(0,110,255,.18);
}

.dt-icon{
    width:58px;
    height:58px;
    margin-bottom:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:rgba(25,183,255,.10);
    border:1px solid rgba(25,183,255,.25);
    color:#7EDCFF;
    font-size:26px;
    font-weight:900;
}

.dt-grid h3{
    font-size:30px;
    margin-bottom:20px;
    letter-spacing:-.035em;
}

.dt-grid p{
    color:#C8D5EA;
    font-size:16px;
    line-height:1.85;
}

.dt-grid ul{
    margin-top:26px;
    display:grid;
    gap:13px;
}

.dt-grid li{
    list-style:none;
    color:#96A8C3;
    font-size:15px;
    line-height:1.6;
}

.dt-grid li::before{
    content:"✦";
    color:#19B7FF;
    margin-right:10px;
}

/* GALLERY */

.dt-gallery{
    padding:120px 0;
}

.dt-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.dt-item{
    padding:0;
    border:1px solid rgba(255,255,255,.10);
    border-radius:26px;
    background:rgba(255,255,255,.035);
    cursor:pointer;
    overflow:hidden;
    aspect-ratio:1 / 1;
    box-shadow:0 20px 70px rgba(0,0,0,.26);
}

.dt-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s ease;
}

.dt-item:hover img{
    transform:scale(1.045);
}

/* ABOUT */

.dt-about{
    padding:120px 0;
}

.dt-about-box{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:60px;
    align-items:center;
    padding:48px;
    border-radius:36px;
    border:1px solid var(--line);
    background:
        radial-gradient(circle at top right, rgba(25,183,255,.12), transparent 38%),
        rgba(255,255,255,.025);
}

.dt-about-box h2{
    margin-top:14px;
    font-size:clamp(34px, 4vw, 54px);
    line-height:1.05;
    letter-spacing:-.05em;
}

.dt-about-box p{
    max-width:680px;
    margin-top:22px;
    color:#DCEAFF;
    font-size:19px;
    line-height:1.8;
    font-weight:600;
}

.dt-about-tags{
    margin-top:28px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.dt-about-tags span{
    padding:12px 16px;
    border-radius:999px;
    background:rgba(25,183,255,.08);
    border:1px solid rgba(25,183,255,.18);
    color:#CFEFFF;
    font-weight:800;
    font-size:13px;
}

.dt-about-image{
    border:0;
    padding:0;
    border-radius:28px;
    overflow:hidden;
    background:none;
    cursor:pointer;
    box-shadow:0 22px 70px rgba(0,0,0,.35);
}

.dt-about-image img{
    width:100%;
    display:block;
}

/* CONTACT */

.dt-contact{
    padding:120px 0;
}

.dt-contact-box{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:34px;
    align-items:stretch;
    padding:42px;
    border-radius:38px;
    border:1px solid var(--line);
    background:
        radial-gradient(circle at 10% 10%, rgba(25,183,255,.12), transparent 36%),
        radial-gradient(circle at 95% 15%, rgba(255,138,0,.08), transparent 30%),
        rgba(255,255,255,.025);
    box-shadow:0 36px 120px rgba(0,0,0,.26);
}

.dt-contact-info{
    padding:20px;
}

.dt-contact-info h2{
    margin-top:14px;
    max-width:560px;
    font-size:clamp(34px, 4vw, 56px);
    line-height:1.05;
    letter-spacing:-.055em;
}

.dt-contact-info p{
    max-width:560px;
    margin-top:22px;
    color:#AAB6CC;
    font-size:18px;
    line-height:1.85;
}

.dt-contact-list{
    margin-top:34px;
    display:grid;
    gap:14px;
}

.dt-contact-list a{
    min-height:62px;
    padding:12px 16px;
    display:flex;
    align-items:center;
    gap:14px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    text-decoration:none;
    font-weight:800;
}

.dt-contact-list img{
    width:36px;
    height:36px;
    border-radius:10px;
    object-fit:cover;
}

.dt-form{
    padding:30px;
    border-radius:30px;
    background:rgba(2,7,19,.52);
    border:1px solid rgba(255,255,255,.08);
}

.dt-form label{
    display:block;
    margin-bottom:18px;
    color:#DCEAFF;
    font-size:13px;
    font-weight:900;
    letter-spacing:.04em;
}

.dt-form input,
.dt-form select,
.dt-form textarea{
    width:100%;
    margin-top:8px;
    padding:16px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    outline:0;
    background:rgba(255,255,255,.045);
    color:#fff;
    font:inherit;
}

.dt-form input::placeholder,
.dt-form textarea::placeholder{
    color:#7788A3;
}

.dt-form select{
    cursor:pointer;
}

.dt-form textarea{
    resize:vertical;
    min-height:120px;
}

.dt-form button{
    width:100%;
    min-height:58px;
    border:0;
    border-radius:18px;
    cursor:pointer;
    background:linear-gradient(135deg, #00AFFF 0%, #007BFF 48%, #FF8A00 100%);
    color:#fff;
    font-weight:900;
    font-size:16px;
    box-shadow:0 20px 58px rgba(0,136,255,.22);
}

/* FOOTER */

.dt-footer{
    padding:34px 0 46px;
    color:var(--muted);
    border-top:1px solid rgba(255,255,255,.05);
}

.dt-footer .dt-wrap{
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.dt-footer strong{
    color:#fff;
}

/*=========================================================
WHATSAPP FLOAT — D'ASCOLA TECH PREMIUM FINAL
=========================================================*/

.dt-whats{

position:fixed;

right:22px;
bottom:28px;

z-index:99999;

width:92px;
height:92px;

display:flex;
align-items:center;
justify-content:center;

border-radius:999px;

overflow:hidden;

text-decoration:none;

background:
radial-gradient(
circle at 35% 25%,
rgba(255,255,255,.96),
rgba(235,255,242,.96)
);

border:2px solid rgba(37,211,102,.30);

backdrop-filter:blur(12px);

box-shadow:
0 18px 55px rgba(0,0,0,.45),
0 0 38px rgba(37,211,102,.35);

transform:translateZ(0);

transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease;

}

/* hover */

.dt-whats:hover{

transform:
translateY(-8px)
scale(1.08);

border-color:
rgba(37,211,102,.65);

box-shadow:
0 24px 70px rgba(0,0,0,.55),
0 0 55px rgba(37,211,102,.65);

}

/* clique */

.dt-whats:active{

transform:
translateY(-2px)
scale(.98);

}

/* imagem */

.dt-whats img{

width:58px;
height:58px;

display:block;

object-fit:contain;

filter:
drop-shadow(
0 0 10px rgba(37,211,102,.40)
);

transition:
transform .25s ease;

}

.dt-whats:hover img{

transform:
scale(1.08);

}

/* pulso */

.dt-whats::before{

content:'';

position:absolute;

inset:-10px;

border-radius:999px;

border:2px solid rgba(37,211,102,.16);

animation:
dtWhatsPulse 3s infinite;

pointer-events:none;

}

/* brilho */

.dt-whats::after{

content:'';

position:absolute;

width:130%;
height:130%;

background:
radial-gradient(
circle,
rgba(37,211,102,.12),
transparent 70%
);

pointer-events:none;

}

@keyframes dtWhatsPulse{

0%{

opacity:.85;
transform:scale(1);

}

70%{

opacity:0;
transform:scale(1.22);

}

100%{

opacity:0;
transform:scale(1.22);

}

}

/* TABLET */

@media(max-width:768px){

.dt-whats{

right:14px;
bottom:18px;

width:78px;
height:78px;

}

.dt-whats img{

width:48px;
height:48px;

}

}

/* MOBILE */

@media(max-width:480px){

.dt-whats{

right:12px;
bottom:16px;

width:72px;
height:72px;

}

.dt-whats img{

width:44px;
height:44px;

}

}

/* IA alinhada */

.dt-ai-float{

left:22px !important;
bottom:28px !important;

}

@media(max-width:768px){

.dt-ai-float{

left:14px !important;
bottom:18px !important;

}

}

/* LIGHTBOX */

.dt-lightbox{
    position:fixed;
    inset:0;
    z-index:3000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(0,0,0,.92);
}

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

.dt-lightbox img{
    max-width:min(1100px, 94vw);
    max-height:90vh;
    border-radius:24px;
    box-shadow:0 30px 120px rgba(0,0,0,.7);
}

.dt-lightbox-close,
.dt-lightbox-prev,
.dt-lightbox-next{
    position:absolute;
    border:0;
    color:#fff;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    cursor:pointer;
}

.dt-lightbox-close{
    top:24px;
    right:24px;
    width:52px;
    height:52px;
    border-radius:18px;
    font-size:34px;
}

.dt-lightbox-prev,
.dt-lightbox-next{
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:78px;
    border-radius:22px;
    font-size:56px;
}

.dt-lightbox-prev{
    left:24px;
}

.dt-lightbox-next{
    right:24px;
}

/* MOBILE */

@media(max-width:980px){

    .dt-wrap{
        width:min(calc(100% - 28px), var(--wrap));
    }

    .dt-header .dt-wrap{
        height:76px;
    }

    .dt-brand img{
        width:48px;
        height:48px;
    }

    .dt-brand h1{
        font-size:20px;
    }

    .dt-brand span{
        display:none;
    }

    .dt-header nav{
        gap:16px;
    }

    .dt-header nav a{
        font-size:12px;
    }

    .dt-hero{
        padding:118px 0 72px;
        min-height:auto;
    }

    .dt-hero .dt-wrap{
        grid-template-columns:1fr;
        gap:42px;
    }

    .dt-left h2{
        font-size:46px;
        letter-spacing:-.05em;
    }

    .dt-left p{
        font-size:17px;
    }

    .dt-right{
        max-width:520px;
        margin:auto;
    }

    .dt-grid,
    .dt-gallery-grid,
    .dt-about-box,
    .dt-contact-box{
        grid-template-columns:1fr;
    }

    .dt-grid article{
        min-height:auto;
        padding:32px;
    }

    .dt-about-box,
    .dt-contact-box{
        padding:26px;
        gap:28px;
    }

    .dt-form{
        padding:22px;
    }
}

@media(max-width:640px){

    .dt-header nav{
        display:none;
    }

    .dt-hero{
        padding-top:108px;
    }

    .dt-left h2{
        font-size:39px;
    }

    .dt-actions a{
        width:100%;
    }

    .dt-services,
    .dt-gallery,
    .dt-about,
    .dt-contact{
        padding:74px 0;
    }

    .dt-section-head{
        margin-bottom:42px;
    }

    .dt-section-head h2,
    .dt-about-box h2,
    .dt-contact-info h2{
        font-size:34px;
    }

    .dt-grid article{
        padding:26px;
    }

    .dt-gallery-grid{
        gap:16px;
    }

    .dt-item{
        border-radius:20px;
    }

    .dt-contact-list a{
        font-size:14px;
    }

    .dt-contact-list span{
        word-break:break-word;
    }

    .dt-footer .dt-wrap{
        flex-direction:column;
        text-align:center;
    }

    .dt-whats{
        width:58px;
        height:58px;
        right:16px;
        bottom:16px;
        border-radius:18px;
    }

    .dt-lightbox-prev,
    .dt-lightbox-next{
        width:44px;
        height:60px;
        font-size:42px;
    }
}

/*=========================================================
SELECT PREMIUM
=========================================================*/

.dt-form select{

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.03)
);

color:#FFFFFF;

cursor:pointer;

padding-right:56px;

background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='white'%3E%3Cpath d='M6 8l5 6 5-6'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:
right 18px center;

background-size:
18px;

}

.dt-form select option{

background:
#071426;

color:
#FFFFFF;

padding:
18px;

}

.dt-form select option:hover{

background:
#0E2C52;

}

.dt-form select:focus{

border-color:
rgba(
25,
183,
255,
.45
);

box-shadow:

0 0 0 4px
rgba(
25,
183,
255,
.08
),

0 18px 50px
rgba(
0,
136,
255,
.18
);

}

.dt-form textarea{

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.03)
);

}

.dt-form input,
.dt-form textarea,
.dt-form select{

transition:
.25s;

}

.dt-form input:hover,
.dt-form textarea:hover,
.dt-form select:hover{

border-color:
rgba(
25,
183,
255,
.22
);

}

.dt-form input:focus,
.dt-form textarea:focus,
.dt-form select:focus{

transform:
translateY(-1px);

}

/*=========================================================
LIGHTBOX — CONTROLES PREMIUM
=========================================================*/

.dt-lightbox{
    background:
        radial-gradient(circle at center, rgba(25,183,255,.12), transparent 38%),
        rgba(0,0,0,.92);
}

.dt-lightbox-close,
.dt-lightbox-prev,
.dt-lightbox-next{
    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.16);
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));

    color:#fff;
    backdrop-filter:blur(18px);

    box-shadow:
        0 18px 55px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.18);

    transition:.25s ease;
}

.dt-lightbox-close:hover,
.dt-lightbox-prev:hover,
.dt-lightbox-next:hover{
    transform:translateY(-50%) scale(1.06);
    border-color:rgba(25,183,255,.45);
    box-shadow:
        0 0 34px rgba(25,183,255,.28),
        0 18px 55px rgba(0,0,0,.55);
}

.dt-lightbox-close{
    top:28px;
    right:28px;

    width:54px;
    height:54px;

    border-radius:18px;
    font-size:0;
    transform:none;
}

.dt-lightbox-close::before,
.dt-lightbox-close::after{
    content:"";
    position:absolute;
    width:22px;
    height:3px;
    border-radius:999px;
    background:#fff;
}

.dt-lightbox-close::before{
    transform:rotate(45deg);
}

.dt-lightbox-close::after{
    transform:rotate(-45deg);
}

.dt-lightbox-close:hover{
    transform:scale(1.06);
}

.dt-lightbox-prev,
.dt-lightbox-next{
    width:64px;
    height:86px;

    border-radius:24px;
    font-size:0;
}

.dt-lightbox-prev::before,
.dt-lightbox-next::before{
    content:"";
    width:18px;
    height:18px;
    border-top:4px solid #fff;
    border-right:4px solid #fff;
    border-radius:2px;
}

.dt-lightbox-prev::before{
    transform:rotate(-135deg);
    margin-left:8px;
}

.dt-lightbox-next::before{
    transform:rotate(45deg);
    margin-right:8px;
}

.dt-lightbox-prev{
    left:32px;
}

.dt-lightbox-next{
    right:32px;
}

/* imagem mais premium */
.dt-lightbox img{
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 40px 140px rgba(0,0,0,.75),
        0 0 80px rgba(25,183,255,.12);
}

/* MOBILE */
@media(max-width:640px){

    .dt-lightbox{
        padding:18px;
    }

    .dt-lightbox-close{
        top:14px;
        right:14px;
        width:46px;
        height:46px;
        border-radius:15px;
    }

    .dt-lightbox-prev,
    .dt-lightbox-next{
        width:46px;
        height:66px;
        border-radius:18px;
    }

    .dt-lightbox-prev{
        left:10px;
    }

    .dt-lightbox-next{
        right:10px;
    }

    .dt-lightbox-prev::before,
    .dt-lightbox-next::before{
        width:14px;
        height:14px;
        border-top-width:3px;
        border-right-width:3px;
    }
}

/*=========================================================
PATCH FINAL — ANIMAÇÕES + INPUT ERRO + LIGHTBOX
ADICIONAR NO FINAL DO site.css
=========================================================*/

/* entrada suave */

.dt-reveal{
    opacity:0;
    transform:
        translateY(56px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.dt-reveal.is-visible{
    opacity:1;
    transform:none;
}

/* telefone inválido */

.dt-input-error{
    border-color:
        #FF5757 !important;

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            87,
            87,
            .10
        ) !important;

    animation:
        dtShake .35s;
}

@keyframes dtShake{

0%{
transform:translateX(0);
}

25%{
transform:translateX(-5px);
}

50%{
transform:translateX(5px);
}

75%{
transform:translateX(-3px);
}

100%{
transform:translateX(0);
}

}

/* imagem trocando */

.dt-lightbox img{

transition:
opacity .18s ease,
transform .30s ease;

will-change:
opacity,
transform;

}

/* abrir */

.dt-lightbox.is-open img{

animation:
dtZoom .25s ease;

}

@keyframes dtZoom{

from{

opacity:.4;

transform:
scale(.94);

}

to{

opacity:1;

transform:
scale(1);

}

}

/* hover nas setas */

.dt-lightbox-prev:hover,
.dt-lightbox-next:hover,
.dt-lightbox-close:hover{

background:
linear-gradient(
180deg,
rgba(
25,
183,
255,
.22
),
rgba(
255,
138,
0,
.10
)
);

}

/* foco formulário */

.dt-form input:focus,
.dt-form textarea:focus,
.dt-form select:focus{

outline:none;

border-color:
rgba(
25,
183,
255,
.45
);

box-shadow:

0 0 0 4px
rgba(
25,
183,
255,
.08
),

0 18px 48px
rgba(
0,
136,
255,
.16
);

}

/* botão envio */

.dt-form button{

transition:
.30s;

}

.dt-form button:hover{

transform:
translateY(-3px);

box-shadow:

0 22px 70px
rgba(
0,
136,
255,
.24
);

}

/* whats */

.dt-whats{

transition:
.35s;

}

.dt-whats:hover{

transform:
translateY(-6px)
scale(1.06);

}

/* mobile */

@media(max-width:640px){

.dt-form button{
min-height:60px;
}

.dt-lightbox img{
max-width:100%;
}

}

.dt-carousel{
    width:100%;
    overflow:hidden;
    margin-top:10px;
    padding:10px 0 30px;
}

.dt-carousel-track{
    display:flex;
    gap:24px;
    width:max-content;
    animation:dtCarousel 36s linear infinite;
}

.dt-carousel:hover .dt-carousel-track{
    animation-play-state:paused;
}

.dt-carousel-item{
    width:330px;
    min-width:330px;
    aspect-ratio:1 / 1;
    padding:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:26px;
    overflow:hidden;
    cursor:pointer;
    background:rgba(255,255,255,.04);
    box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.dt-carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s ease;
}

.dt-carousel-item:hover img{
    transform:scale(1.05);
}

@keyframes dtCarousel{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

@media(max-width:640px){
    .dt-carousel-item{
        width:250px;
        min-width:250px;
        border-radius:20px;
    }

    .dt-carousel-track{
        gap:16px;
        animation-duration:28s;
    }
}

/*=========================================================
I.A INSTAGRAM — D'ASCOLA NEXUS PREMIUM FINAL
=========================================================*/

.dt-ai-float{

position:fixed;

left:22px;
bottom:28px;

z-index:99999;

width:92px;
height:92px;

display:flex;
align-items:center;
justify-content:center;

border-radius:999px;

overflow:hidden;

text-decoration:none;

background:
radial-gradient(
circle at 35% 25%,
rgba(12,35,70,.96),
rgba(5,18,35,.98)
);

border:2px solid rgba(0,170,255,.30);

backdrop-filter:blur(12px);

box-shadow:
0 18px 55px rgba(0,0,0,.45),
0 0 38px rgba(0,170,255,.35);

transform:translateZ(0);

transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease;

}

/* hover */

.dt-ai-float:hover{

transform:
translateY(-8px)
scale(1.08);

border-color:
rgba(0,170,255,.70);

box-shadow:
0 24px 70px rgba(0,0,0,.55),
0 0 58px rgba(0,170,255,.65);

}

/* clique */

.dt-ai-float:active{

transform:
translateY(-2px)
scale(.98);

}

/* imagem */

.dt-ai-float img,
.dt-ai-float__img{

width:100%;
height:100%;

display:block;

object-fit:cover;

border-radius:50%;

filter:
drop-shadow(
0 0 10px rgba(0,170,255,.35)
);

transition:
transform .25s ease;

}

.dt-ai-float:hover img{

transform:
scale(1.08);

}

/* pulso */

.dt-ai-float::before{

content:'';

position:absolute;

inset:-10px;

border-radius:999px;

border:2px solid rgba(0,170,255,.16);

animation:
dtAiPulse 3s infinite;

pointer-events:none;

}

/* glow */

.dt-ai-float::after{

content:'';

position:absolute;

width:130%;
height:130%;

background:
radial-gradient(
circle,
rgba(0,170,255,.14),
transparent 70%
);

pointer-events:none;

}

@keyframes dtAiPulse{

0%{

opacity:.85;
transform:scale(1);

}

70%{

opacity:0;
transform:scale(1.22);

}

100%{

opacity:0;
transform:scale(1.22);

}

}

/* TABLET */

@media(max-width:768px){

.dt-ai-float{

left:14px;
bottom:18px;

width:78px;
height:78px;

}

}

/* MOBILE */

@media(max-width:480px){

.dt-ai-float{

left:12px;
bottom:16px;

width:72px;
height:72px;

}

}

/*=========================================================
HERO V2 — D'ASCOLA TECH
ADICIONAR NO FINAL
=========================================================*/

.dt-hero{

padding:
170px 0 120px;

min-height:100vh;

display:flex;

align-items:center;

}

.dt-hero .dt-wrap{

display:grid;

grid-template-columns:
1.05fr
.95fr;

gap:90px;

align-items:center;

}

/* ESQUERDA */

.dt-left{

max-width:760px;

}

.dt-left h2{

margin-top:28px;

font-size:
clamp(
56px,
7vw,
92px
);

line-height:
.92;

letter-spacing:
-.075em;

max-width:
900px;

background:
linear-gradient(
180deg,
#ffffff,
#cde7ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:
transparent;

text-wrap:
balance;

}

.dt-left p{

margin-top:34px;

max-width:
620px;

padding-left:
22px;

border-left:
4px solid
rgba(
25,
183,
255,
.35
);

font-size:
20px;

line-height:
1.9;

color:
#B8C7DA;

}

/* CTA */

.dt-actions{

margin-top:
42px;

display:flex;

gap:
18px;

}

/* DIFERENCIAIS */

.dt-hero-points{

margin-top:
34px;

display:flex;

flex-wrap:wrap;

gap:
14px;

max-width:
760px;

}

.dt-hero-points span{

padding:
14px
18px;

border-radius:
999px;

background:
rgba(
255,
255,
255,
.04
);

border:
1px solid
rgba(
25,
183,
255,
.16
);

color:
#DDEBFF;

font-size:
14px;

font-weight:
800;

backdrop-filter:
blur(16px);

}

.dt-hero-points span:hover{

transform:
translateY(-2px);

border-color:
rgba(
25,
183,
255,
.40
);

}

/* DIREITA */

.dt-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.dt-right::before{

content:"";

position:absolute;

width:130%;

height:130%;

background:

radial-gradient(
circle,
rgba(
0,
120,
255,
.18
),
transparent 70%
);

filter:
blur(60px);

z-index:0;

}

/* CARD */

.dt-hero-card{

position:relative;

z-index:2;

width:
100%;

max-width:
620px;

border-radius:
38px;

overflow:hidden;

background:
rgba(
255,
255,
255,
.04
);

border:
1px solid
rgba(
255,
255,
255,
.08
);

box-shadow:

0 40px 120px rgba(0,0,0,.55),

0 0 80px rgba(0,120,255,.14);

}

.dt-hero-card img{

display:block;

width:100%;

aspect-ratio:
16/8;

object-fit:
cover;

transition:
.55s;

}

.dt-hero-card:hover img{

transform:
scale(
1.035
);

}

/* MOBILE */

@media(max-width:980px){

.dt-hero{

padding:
130px 0 80px;

}

.dt-hero .dt-wrap{

grid-template-columns:
1fr;

gap:
52px;

}

.dt-left{

max-width:none;

}

.dt-left h2{

font-size:
clamp(
42px,
12vw,
64px
);

}

.dt-left p{

padding-left:
18px;

font-size:
17px;

}

.dt-right{

order:-1;

}

.dt-hero-card{

max-width:
100%;

}

}

@media(max-width:640px){

.dt-left h2{

font-size:
52px;

}

.dt-left p{

font-size:
16px;

line-height:
1.8;

}

.dt-actions{

flex-direction:
column;

}

.dt-actions a{

width:
100%;

}

.dt-hero-points{

gap:
10px;

}

.dt-hero-points span{

width:
100%;

justify-content:center;

}

}

/*=========================================================
HERO PREMIUM COMPACTO — D'ASCOLA TECH
ADICIONAR NO FINAL DO site.css
=========================================================*/

.dt-hero{
    min-height:auto !important;
    padding:135px 0 92px !important;
}

.dt-hero .dt-wrap{
    grid-template-columns:minmax(0, .92fr) minmax(420px, .78fr) !important;
    gap:72px !important;
    align-items:center !important;
}

.dt-left{
    max-width:680px !important;
}

.dt-chip{
    padding:9px 16px !important;
    font-size:11px !important;
    letter-spacing:.16em !important;
}

.dt-left h2{
    margin-top:24px !important;
    max-width:680px !important;

    font-size:clamp(48px, 5.1vw, 72px) !important;
    line-height:.96 !important;
    letter-spacing:-.065em !important;

    background:linear-gradient(180deg,#fff 0%,#d7ecff 100%) !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
}

.dt-left p{
    margin-top:30px !important;
    max-width:610px !important;

    padding:22px 0 22px 24px !important;
    border-left:4px solid rgba(25,183,255,.42) !important;

    font-size:18px !important;
    line-height:1.75 !important;
    color:#B8C7DA !important;
}

.dt-actions{
    margin-top:34px !important;
    gap:14px !important;
}

.dt-btn,
.dt-link{
    min-height:52px !important;
    padding:0 28px !important;
    border-radius:16px !important;
    font-size:15px !important;
}

.dt-hero-points{
    margin-top:28px !important;
    display:flex !important;
    gap:12px !important;
    flex-wrap:wrap !important;
}

.dt-hero-points span{
    padding:12px 17px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(25,183,255,.18) !important;
    color:#DDEBFF !important;
    font-size:13px !important;
    font-weight:800 !important;
}

.dt-right{
    max-width:560px !important;
    justify-self:end !important;
}

.dt-hero-card{
    max-width:560px !important;
    border-radius:30px !important;
}

.dt-hero-card img{
    aspect-ratio:16 / 7.6 !important;
    object-fit:cover !important;
}

@media(max-width:1180px){
    .dt-hero .dt-wrap{
        grid-template-columns:1fr !important;
        gap:46px !important;
    }

    .dt-right{
        justify-self:start !important;
        max-width:620px !important;
    }

    .dt-left h2{
        max-width:760px !important;
    }
}

@media(max-width:640px){
    .dt-hero{
        padding:112px 0 70px !important;
    }

    .dt-left h2{
        font-size:clamp(39px, 11vw, 52px) !important;
        line-height:.98 !important;
    }

    .dt-left p{
        font-size:16px !important;
        line-height:1.75 !important;
        padding-left:18px !important;
    }

    .dt-right{
        width:100% !important;
    }

    .dt-hero-card img{
        aspect-ratio:16 / 9 !important;
    }

    .dt-hero-points span{
        width:100% !important;
        text-align:center !important;
    }
}

/*=========================================================
HERO POINTS — FINAL PREMIUM
=========================================================*/

.dt-hero-points{

margin-top:26px !important;

display:flex !important;

flex-wrap:wrap !important;

gap:12px !important;

max-width:620px !important;

}

.dt-hero-points span{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

min-height:50px;

padding:0 18px 0 42px !important;

border-radius:999px !important;

background:
rgba(255,255,255,.035);

border:
1px solid rgba(25,183,255,.14);

color:#DDEAFF !important;

font-size:13px !important;

font-weight:800 !important;

line-height:1 !important;

box-shadow:
0 10px 30px rgba(0,0,0,.14);

transition:
.22s ease;

backdrop-filter:
blur(12px);

}

.dt-hero-points span::before{

content:'';

position:absolute;

left:16px;

width:10px;

height:10px;

border-radius:50%;

background:
linear-gradient(
135deg,
#19B7FF,
#008FFF
);

box-shadow:
0 0 14px rgba(25,183,255,.45);

}

.dt-hero-points span:hover{

transform:
translateY(-2px);

border-color:
rgba(25,183,255,.28);

background:
rgba(255,255,255,.05);

}

@media(max-width:900px){

.dt-hero-points{

max-width:100% !important;

}

.dt-hero-points span{

width:auto !important;

}

}

@media(max-width:640px){

.dt-hero-points{

gap:10px !important;

}

.dt-hero-points span{

width:100% !important;

justify-content:flex-start;

}

}

/*=========================================================
FLOAT TOOLTIP — IA / WHATSAPP FINAL
=========================================================*/

.dt-float-action{
    cursor:pointer;
    border:0;
}

.dt-float-tooltip{
    position:absolute;
    bottom:calc(100% + 16px);

    min-width:230px;
    max-width:280px;

    padding:13px 16px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(6,20,38,.98),
            rgba(3,11,24,.98)
        );

    border:1px solid rgba(25,183,255,.28);

    color:#EAF6FF;

    font-size:13px;
    font-weight:900;
    line-height:1.25;

    text-align:center;

    box-shadow:
        0 18px 50px rgba(0,0,0,.55),
        0 0 30px rgba(25,183,255,.22);

    opacity:0;
    visibility:hidden;

    transform:translateY(8px) scale(.96);

    transition:.25s ease;

    pointer-events:none;

    z-index:100000;
}

.dt-float-tooltip::after{
    content:"";

    position:absolute;
    bottom:-7px;

    width:14px;
    height:14px;

    background:rgba(3,11,24,.98);

    border-right:1px solid rgba(25,183,255,.28);
    border-bottom:1px solid rgba(25,183,255,.28);

    transform:rotate(45deg);
}

.dt-float-action:hover .dt-float-tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

/* IA — balão abre para dentro da tela */

.dt-ai-float .dt-float-tooltip{
    left:0;
}

.dt-ai-float .dt-float-tooltip::after{
    left:38px;
}

/* WhatsApp — balão abre para dentro da tela */

.dt-whats .dt-float-tooltip{
    right:0;
}

.dt-whats .dt-float-tooltip::after{
    right:38px;
}

@media(max-width:640px){
    .dt-float-tooltip{
        display:none;
    }
}

/*=========================================================
PATCH FINAL — CAPA HERO MOBILE SEM CORTAR LOGO
=========================================================*/

.dt-hero-card{
    background:
        radial-gradient(circle at 20% 50%, rgba(25,183,255,.12), transparent 42%),
        radial-gradient(circle at 90% 50%, rgba(255,138,0,.10), transparent 38%),
        #061326 !important;
}

.dt-hero-card img{
    object-position:center center !important;
}

/* MOBILE — mostra a arte inteira sem cortar o logo */
@media(max-width:640px){

    .dt-hero-card{
        width:100% !important;
        border-radius:28px !important;
    }

    .dt-hero-card img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:auto !important;
        object-fit:contain !important;
        object-position:center center !important;
        display:block !important;
    }

}