*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#e9eef2;
    color:#111;
}

.app-container{
    width:100%;
    max-width:480px;
    min-height:100vh;
    margin:0 auto;
    background:#f7f9fb;
    padding-bottom:25px;
}

/*==========================
        HERO
==========================*/

.hero{

    position:relative;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #1E7BFF 0%,
        #1664DA 45%,
        #0E4FB8 100%
    );

    color:#fff;
    text-align:center;

    padding:40px 20px 35px;

    border-radius:0 0 35px 35px;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.hero::before{

    content:"";

    position:absolute;

    width:430px;
    height:430px;

    left:50%;
    top:-210px;

    transform:translateX(-50%);

    border-radius:50%;

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

    filter:blur(95px);

    pointer-events:none;

}

.logo{

    position:relative;
    z-index:2;

    width:340px;
    max-width:95%;
    height:auto;

    display:block;

    margin:0 auto 22px;

    object-fit:contain;

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

}

.hero h1{

    position:relative;
    z-index:2;

    margin:0;

    font-size:56px;
    font-weight:800;

    line-height:1.05;

    text-shadow:
        0 3px 10px rgba(0,0,0,.25);

}

.hero p{

    position:relative;
    z-index:2;

    margin-top:12px;

    font-size:18px;

    opacity:.92;

    font-weight:400;

}

/*==========================
    DATOS VEHICULO
==========================*/

.vehicle-box{

    text-align:center;

    padding:28px 20px 10px;

}

.vehicle-box h2{

    margin:0;

    font-size:36px;

    letter-spacing:1px;

}

.vehicle-box p{

    margin:10px 0 15px;

    font-size:18px;

    color:#444;

}

#estadoServicio{

    display:inline-block;

    background:#13b66b;

    color:#fff;

    padding:8px 20px;

    border-radius:30px;

    font-weight:bold;

    font-size:14px;

}

/*==========================
    DOCUMENTOS
==========================*/

.tabs-box{

    padding:18px 15px 5px;

    text-align:center;

}

.section-title{

    font-weight:700;

    font-size:18px;

    color:#333;

    margin-bottom:18px;

}

.tabs-horizontal{

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:5px 5px 15px;

    scroll-snap-type:x mandatory;

}

.tab-btn{

    min-width:145px;

    border:none;

    border-radius:18px;

    color:white;

    padding:16px 12px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    scroll-snap-align:center;

    transition:.25s;

    box-shadow:0 8px 16px rgba(0,0,0,.15);

}

.tab-btn:hover{

    transform:translateY(-3px);

}

.tab-btn.active{

    transform:scale(1.05);

    outline:3px solid rgba(0,0,0,.15);

}

.color-0{

    background:linear-gradient(135deg,#00c6ff,#0072ff);

}

.color-1{

    background:linear-gradient(135deg,#f72585,#7209b7);

}

.color-2{

    background:linear-gradient(135deg,#ffb703,#fb8500);

}

.color-3{

    background:linear-gradient(135deg,#06d6a0,#118ab2);

}

.color-4{

    background:linear-gradient(135deg,#8338ec,#3a86ff);

}

/*==========================
    DOCUMENTO
==========================*/

.document-content{

    padding:10px 15px;

}

.document-card{

    background:#fff;

    border-radius:22px;

    padding:24px;

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

    text-align:center;

}

.document-card h3{

    margin:0;

    font-size:24px;

}

.document-card p{

    margin:8px 0;

    color:#555;

}

.status{

    display:inline-block;

    margin:12px 0 20px;

    padding:8px 16px;

    border-radius:30px;

    color:white;

    font-weight:bold;

    background:#13b66b;

}

.action-buttons{

    display:flex;

    gap:12px;

    margin-bottom:18px;

}

.action-buttons a{

    flex:1;

    text-decoration:none;

    color:white;

    background:#111827;

    padding:14px 10px;

    border-radius:16px;

    font-weight:bold;

    transition:.2s;

}

.action-buttons a:hover{

    opacity:.9;

}

.action-buttons a.secondary{

    background:#6b7280;

}

.pdf-frame{

    width:100%;

    height:480px;

    border:none;

    border-radius:16px;

    background:#f1f1f1;

}

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

footer{

    text-align:center;

    font-size:13px;

    color:#777;

    padding:20px;

}

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

@media(max-width:390px){

    .hero{

        padding:35px 18px 28px;

    }

    .logo{

        width:300px;

        margin-bottom:18px;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:16px;

    }

    .vehicle-box h2{

        font-size:32px;

    }

    .tab-btn{

        min-width:130px;

        font-size:14px;

    }

    .pdf-frame{

        height:420px;

    }

}