/* ============================================
   INTEGRACOES.CSS — Estilos específicos da página Integracoes
   ============================================ */

/* --- Hero --- */
.hero-section {
    padding-top:106px;
    background-color:#0c0c0c;
    background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:60px 60px;
}
.hero-h1 {
    font-family:'Roboto',sans-serif;
    font-weight:700;
    font-size:clamp(40px,5vw,60px);
    color:#ffffff;
    line-height:1.15;
    letter-spacing:-2px;
    margin:0 auto 32px;
    max-width:900px;
    text-align:center;
}
.hero-h2 {
    font-family:'DM Sans',sans-serif;
    font-size:20px;
    line-height:1.72;
    color:rgba(255,255,255,0.75);
    max-width:700px;
    margin:0 auto 60px;
    text-align:center;
}


/* --- Integration Cards --- */
.int-section {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}


/* --- CTA --- */
.cta-section {
    background:var(--blue);
    padding:72px var(--pad);
}
.cta-container-pai {
    max-width:1320px;
    margin:0 auto;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
}
.cta-container-filho {
    min-width:280px;
}
.cta-h2 {
    font-family:'Roboto',sans-serif;
    font-weight:500;
    font-size:clamp(26px,3vw,40px);
    color:var(--bg);
    line-height:1.10;
    letter-spacing:0px;
    max-width: 780px;
}
.cta-h3 {
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(18px,2vw,18px);
    color:rgba(255,255,255,0.75);
    line-height:1.45;
    margin-top:20px;
}
.cta-container-final {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}


:focus-visible { 
    outline:2px solid #005bff;
    outline-offset:2px; 
}
.skip-link { 
    position:absolute;
    top:-100px;
    left:16px;
    background:#005bff;
    color:#fff;
    padding:8px 16px;
    z-index:300;
    border-radius:8px;
    font-family:'DM Sans',sans-serif;
    font-weight:600;
    font-size:14px;
    text-decoration:none; 
}
.skip-link:focus { 
    top:16px; 
}
   


@media(max-width:960px){ 
.int-grid{grid-template-columns:1fr!important;} 
.cta-row{ 
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;} 
}
.int-card { 
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.12);
    padding:28px 24px;
    transition:border-color .2s;
    border-radius:5px;
    display:flex;
    flex-direction:column; 
}
.int-card-top { 
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    margin-bottom:12px; 
}
.int-tag { 
    font-family:'DM Mono',monospace;
    font-size:13px;
    padding:4px 10px;
    background:rgba(0,91,255,0.1);
    border:1px solid rgba(0,91,255,0.25);
    color:#f5f5f5;
    font-weight:500;
    letter-spacing:0.3px;
    border-radius:50px; 
}
.int-h2 { 
    font-family:'Roboto',sans-serif;
    font-weight:700;
    font-size:19px;
    color:#fff;
    margin-bottom:10px;
    line-height:1.2; 
}
.int-desc { 
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    color:rgba(255,255,255,0.75);
    line-height:1.7;
    margin-bottom:18px; 
}
.int-list { 
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:7px;
    flex:1; 
}
.int-li { 
    display:flex;
    align-items:center;
    gap:8px; 
}
.int-check { 
    color:#3074EF;
    font-weight:700;
    font-size:13px;
    flex-shrink:0;
    line-height:1.4; 
}
.int-text { 
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    color:rgba(255,255,255,0.75);
    line-height:1.5; 
}