/*==================================================
    Hora do QA
    article.css

    Estilos exclusivos dos artigos
===================================================*/


/*========================================
    VARIÁVEIS
========================================*/


:root{

    --article-bg:#020617;

    --card-bg:

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

    --border:

    rgba(255,255,255,.12);

    --primary:#2563EB;

    --secondary:#06B6D4;

    --text:#CBD5E1;

    --title:#F8FAFC;

    --success:#22C55E;

}





/*========================================
    LAYOUT PRINCIPAL
========================================*/


.article-layout{


    display:grid;


    grid-template-columns:

    280px

    minmax(0,900px);


    gap:50px;


    max-width:1300px;


    margin:auto;


    padding:80px 20px;


}




/*========================================
    SIDEBAR FIXA
========================================*/


.article-sidebar{


    position:sticky;


    top:120px;


    height:max-content;


    background:

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


    border:

    1px solid var(--border);


    border-radius:20px;


    padding:30px;


    backdrop-filter:

    blur(20px);


}



.article-sidebar h3{


    color:white;


    font-size:1.1rem;


    margin-bottom:25px;


}



.article-sidebar ul{


    list-style:none;


    padding:0;


}



.article-sidebar li{


    margin-bottom:15px;


}



.article-sidebar a{


    color:#94A3B8;


    text-decoration:none;


    transition:.3s;


}



.article-sidebar a:hover{


    color:#38BDF8;


    padding-left:8px;


}



/*========================================
    HEADER DO ARTIGO
========================================*/


.article-header{


    margin-bottom:50px;


}



.article-category{


    display:inline-block;


    padding:8px 18px;


    border-radius:50px;


    background:

    rgba(37,99,235,.15);


    color:#38BDF8;


    font-size:.85rem;


}



.article-header h1{


    margin-top:25px;


    font-size:3rem;


    line-height:1.1;


    color:white;


}



.article-meta{


    display:flex;


    gap:25px;


    margin-top:25px;


    color:#94A3B8;


    font-size:.9rem;


}







/*========================================
    CONTEÚDO
========================================*/


.article-content{


    color:var(--text);


    font-size:1.05rem;


    line-height:1.8;


}



.article-content h2{


    margin-top:70px;


    margin-bottom:25px;


    font-size:2rem;


    color:white;


    position:relative;


}



.article-content h2::after{


    content:"";


    display:block;


    width:70px;


    height:4px;


    margin-top:15px;


    background:

    linear-gradient(

    90deg,

    var(--primary),

    var(--secondary)

    );


    border-radius:20px;


}



.article-content h3{


    color:white;


    margin-top:30px;


}






/*========================================
    CARDS DE CONHECIMENTO
========================================*/


.knowledge-grid{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:25px;


    margin:40px 0;


}




.knowledge-card{


    display:flex;


    gap:20px;


    padding:30px;


    background:

    var(--card-bg);


    border:

    1px solid var(--border);


    border-radius:20px;


    transition:.4s;


}




.knowledge-card:hover{


    transform:

    translateY(-8px);


    border-color:#38BDF8;


    box-shadow:

    0 20px 50px rgba(0,0,0,.35);


}




.knowledge-card .icon{


    width:55px;


    height:55px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:15px;


    background:

    linear-gradient(

    135deg,

    #2563EB,

    #06B6D4

    );


    color:white;


    font-size:1.5rem;


}






/*========================================
    CAIXAS DE DESTAQUE
========================================*/


.highlight-box{


    margin:40px 0;


    padding:35px;


    border-radius:20px;


    background:

    linear-gradient(

    135deg,

    rgba(37,99,235,.18),

    rgba(6,182,212,.08)

    );


    border:

    1px solid rgba(56,189,248,.3);


}



.highlight-box strong{


    color:#38BDF8;


}







/*========================================
    COMPARAÇÃO
========================================*/


.compare-table{


    width:100%;


    border-collapse:collapse;


    margin:40px 0;


    overflow:hidden;


    border-radius:20px;


}



.compare-table th{


    background:#1E293B;


    color:white;


    padding:18px;


}



.compare-table td{


    padding:18px;


    border-bottom:

    1px solid var(--border);


}



.compare-table tr:hover{


    background:

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


}





/*========================================
    TOOL CARDS
========================================*/


.tool-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


    margin:40px 0;


}



.tool-card{


    padding:30px;


    background:

    var(--card-bg);


    border-radius:20px;


    border:

    1px solid var(--border);


    transition:.3s;


}



.tool-card i{


    font-size:2rem;


    color:#38BDF8;


}



.tool-card:hover{


    transform:

    translateY(-10px);


}







/*========================================
    TIMELINE
========================================*/


.timeline{


    position:relative;


    margin:50px 0;


    padding-left:40px;


}



.timeline::before{


    content:"";


    position:absolute;


    left:10px;


    top:0;


    height:100%;


    width:3px;


    background:

    linear-gradient(

    #2563EB,

    #06B6D4

    );


}



.timeline-item{


    position:relative;


    margin-bottom:45px;


}



.timeline-item::before{


    content:"";


    position:absolute;


    left:-38px;


    top:5px;


    width:18px;


    height:18px;


    border-radius:50%;


    background:#06B6D4;


    box-shadow:

    0 0 20px #06B6D4;


}



.timeline-item span{


    color:#38BDF8;


    font-weight:bold;


}






/*========================================
    BLOCO DE CÓDIGO
========================================*/


.code-block{


    background:

    #020617;


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:20px;


    padding:25px;


    overflow:auto;


    margin:35px 0;


}



.code-block pre{


    margin:0;


}



.code-block code{


    color:#38BDF8;


    font-family:

    "Fira Code",

    monospace;


    font-size:.95rem;


}






/*========================================
    TAGS
========================================*/


.article-tags{


    display:flex;


    flex-wrap:wrap;


    gap:10px;


}



.article-tags span{


    padding:7px 15px;


    border-radius:50px;


    background:

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


    color:#CBD5E1;


}







/*========================================
    RESPONSIVO
========================================*/


@media(max-width:1000px){


.article-layout{


    grid-template-columns:1fr;


}



.article-sidebar{


    position:relative;


    top:0;


}



.knowledge-grid,


.tool-grid{


    grid-template-columns:1fr;


}



.article-header h1{


    font-size:2.2rem;


}


}

.timeline-item ul {

    margin-top:20px;

    padding-left:20px;

}


.timeline-item li {

    margin-bottom:8px;

    color:#94A3B8;

}


.timeline-item a {

    color:#38BDF8;

    text-decoration:none;

}


.timeline-item a:hover {

    color:white;

}

/*========================================
    COMPARATIVO MANUAL X AUTOMÁTICO
========================================*/


.compare-grid{

    display:grid;

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

    gap:30px;

    margin:40px 0;

}



.compare-card{

    padding:35px;

    border-radius:25px;

    background:

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

    border:

    1px solid rgba(255,255,255,.1);

    transition:.3s;

}



.compare-card:hover{

    transform:translateY(-8px);

}



.compare-card.manual{

    border-color:

    rgba(245,158,11,.4);

}



.compare-card.automated{

    border-color:

    rgba(34,197,94,.4);

}



.compare-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:

    linear-gradient(

    135deg,

    #2563EB,

    #06B6D4

    );

    color:white;

    font-size:28px;

    margin-bottom:25px;

}



.compare-card ul{

    padding-left:20px;

}



.compare-card li{

    margin-bottom:15px;

}



.subtitle{

    color:#94A3B8;

    font-style:italic;

}



.badge-warning,

.badge-success{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    margin-top:20px;

}



.badge-warning{

    background:

    rgba(245,158,11,.15);

    color:#FBBF24;

}



.badge-success{

    background:

    rgba(34,197,94,.15);

    color:#4ADE80;

}



.table-title{

    margin-top:80px;

}



@media(max-width:900px){

    .compare-grid{

        grid-template-columns:1fr;

    }

}

.article-subtitle {

    font-size:1.2rem;

    color:#94A3B8;

    max-width:750px;

    margin:20px 0 30px;

    line-height:1.6;

}



.article-meta {

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    color:#CBD5E1;

    margin-bottom:25px;

}



.article-meta span {

    display:flex;

    align-items:center;

    gap:8px;

}



.article-meta i {

    color:#38BDF8;

}



.article-tags {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.article-tags span {

    background:

    rgba(56,189,248,.12);

    border:

    1px solid rgba(56,189,248,.25);

    color:#38BDF8;

    padding:6px 15px;

    border-radius:50px;

    font-size:.85rem;

}

/*========================================
    BENEFITS CARDS
========================================*/


.benefits-grid{

    display:grid;

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

    gap:25px;

    margin:40px 0;

}



.benefit-card{

    padding:30px;

    background:

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

    border:

    1px solid rgba(255,255,255,.1);

    border-radius:22px;

    transition:.35s;

}



.benefit-card:hover{

    transform:translateY(-10px);

    border-color:#38BDF8;

    box-shadow:

    0 20px 40px rgba(0,0,0,.25);

}



.benefit-icon{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:

    linear-gradient(

    135deg,

    #2563EB,

    #06B6D4

    );

    color:white;

    font-size:25px;

    margin-bottom:25px;

}



.benefit-card h3{

    color:white;

    margin-bottom:15px;

}



.benefit-card p{

    color:#CBD5E1;

    line-height:1.7;

}



.benefit-tag{

    display:inline-block;

    margin-top:20px;

    padding:7px 15px;

    border-radius:50px;

    background:

    rgba(56,189,248,.12);

    color:#38BDF8;

    font-size:.85rem;

}



.section-intro{

    max-width:850px;

    color:#94A3B8;

}



@media(max-width:1000px){

    .benefits-grid{

        grid-template-columns:1fr;

    }

}

section[id] {

    scroll-margin-top: 100px;

}

.tools-grid {

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

	gap:30px;

	margin-top:40px;

}


.tool-card {

	background:
		linear-gradient(
			145deg,
			#111827,
			#1e293b
		);

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

	border-radius:20px;

	padding:30px;

	transition:.3s;

}


.tool-card:hover {

	transform:translateY(-8px);

	border-color:#38bdf8;

	box-shadow:
		0 20px 40px rgba(0,0,0,.35);

}



.tool-icon {

	width:55px;

	height:55px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:14px;

	background:#0ea5e9;

	color:white;

	font-size:25px;

	margin-bottom:20px;

}



.tool-category {

	display:inline-block;

	padding:5px 12px;

	border-radius:20px;

	background:rgba(56,189,248,.15);

	color:#38bdf8;

	font-size:.8rem;

	margin-bottom:15px;

}



.tool-link {

	color:#38bdf8;

	font-weight:600;

	text-decoration:none;

}

.testing-grid {

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

	gap:30px;

	margin-top:40px;

}


.testing-card {

	background:
		linear-gradient(
			145deg,
			#111827,
			#1e293b
		);

	padding:30px;

	border-radius:20px;

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

	transition:.3s;

}


.testing-card:hover {

	transform:translateY(-8px);

	border-color:#38bdf8;

	box-shadow:
		0 20px 40px rgba(0,0,0,.35);

}


.testing-icon {

	width:55px;

	height:55px;

	display:flex;

	align-items:center;

	justify-content:center;

	background:#0ea5e9;

	color:white;

	border-radius:15px;

	font-size:24px;

	margin-bottom:20px;

}


.testing-level {

	display:inline-block;

	margin-top:15px;

	padding:6px 14px;

	border-radius:20px;

	background:rgba(14,165,233,.15);

	color:#38bdf8;

	font-size:.85rem;

}