/* ===========================================================
   TRACKING - NOVO LAYOUT
=========================================================== */

:root{

    --primary:#0d3b66;
    --primary-dark:#082947;
    --secondary:#1f6feb;
    --accent:#ff8a00;
    --success:#28a745;
    --danger:#dc3545;

    --background:#f5f7fb;
    --white:#ffffff;

    --text:#253858;
    --text-light:#667085;

    --border:#e5e7eb;

    --shadow:
        0 15px 35px rgba(0,0,0,.08);

    --radius:16px;

    --transition:.30s ease;

}

body{

    background:var(--background);
    color:var(--text);
    font-family:'Poppins',sans-serif;

}

/*************************************************
 HERO
*************************************************/

.tracking-hero{
	min-height: 100vh;
	background: linear-gradient(rgba(13,59,102,.75),
    rgba(13,59,102,.75)),
    url("../images/banner.jpg") center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 60px;
	padding-left: 20px;

}

.tracking-container{
	width: 100%;
	max-width: 1200px;

}

.tracking-card{

    background:#fff;

    border-radius:22px;

    box-shadow:var(--shadow);

    overflow:hidden;

    display:grid;

    grid-template-columns:380px 1fr;

}

.tracking-logo{

    background:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px;

}

.tracking-logo img{

    max-width:220px;

}

.tracking-content{

    padding:60px;

}

.tracking-badge{

    display:inline-block;

    background:#eef5ff;

    color:var(--secondary);

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:25px;

}

.tracking-content h1{

    font-size:42px;

    color:var(--primary);

    font-weight:700;

    margin-bottom:20px;

}

.tracking-content p{

    color:#666;

    font-size:17px;

    line-height:30px;

    margin-bottom:35px;

}

/*************************************************
 BUSCA
*************************************************/

.tracking-search{

    display:flex;

    gap:15px;

}

.tracking-search input{

    flex:1;

    border:1px solid var(--border);

    border-radius:12px;

    height:60px;

    padding:0 22px;

    font-size:16px;

    transition:var(--transition);

}

.tracking-search input:focus{

    outline:none;

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(31,111,235,.15);

}

.tracking-search button{

    border:none;

    background:linear-gradient(
        135deg,
        var(--accent),
        #ff6500
    );

    color:#fff;

    padding:0 34px;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.tracking-search button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(255,138,0,.35);

}

/*************************************************
 INFO
*************************************************/

.tracking-info{

    display:flex;

    gap:30px;

    margin-top:45px;

    flex-wrap:wrap;

}

.info-item{

    display:flex;

    align-items:center;

    gap:12px;

}

.info-item i{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#eef5ff;

    color:var(--secondary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.info-item span{

    font-weight:500;

}

/*************************************************
 DETAILS
*************************************************/

.tracking-header{

    background:var(--primary);

    color:#fff;

    padding:35px 0;

}

.summary-card{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    background:#fff;

    border-radius:18px;

    padding:30px;

    box-shadow:var(--shadow);

    margin-top:-40px;

    position:relative;

    z-index:10;

}

.summary-item{

    text-align:center;

}

.summary-item small{

    display:block;

    color:#999;

    margin-bottom:10px;

}

.summary-item strong{

    font-size:20px;

    color:var(--primary);

}