/* ==================================================
   PORTAL CCT UENP
   CSS V2 - MVP INSTITUCIONAL
================================================== */

/* ==================================================
   01. VARIABLES
================================================== */

:root{

    --navy:#0a1628;

    --blue:#2563eb;
    --blue-light:#3b82f6;
    --blue-bg:#eff6ff;

    --green:#10b981;
    --purple:#7c3aed;
    --orange:#f59e0b;

    --bg:#f8fafc;
    --white:#ffffff;

    --text:#1e293b;
    --text-soft:#475569;
    --muted:#94a3b8;

    --border:#e2e8f0;

    --shadow:0 4px 24px rgba(0,0,0,.08);

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:48px;
    --space-xl:80px;
}

/* ==================================================
   02. RESET
================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--white);
    color:var(--text);
    line-height:1.65;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:var(--blue);
    text-decoration:none;
    transition:.2s;
}

a:hover{
    color:var(--blue-light);
}

a:focus,
button:focus{

    outline:3px solid var(--blue);
    outline-offset:3px;
}

ul{
    padding-left:20px;
}

li{
    margin-bottom:8px;
}

p{
    margin-bottom:16px;
}

h1,h2,h3,h4,h5,h6{
    line-height:1.2;
}

/* ==================================================
   03. UTILITIES
================================================== */

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.mt-lg{
    margin-top:48px;
}

.mb-lg{
    margin-bottom:48px;
}

.hidden{
    display:none;
}

/* ==================================================
   04. LAYOUT
================================================== */

.container{
    max-width:1100px;
    margin:0 auto;
    padding:0 24px;
}

.container-narrow{
    max-width:800px;
    margin:0 auto;
}

.section{
    padding:80px 0;
}

.section-alt{
    background:var(--bg);
}

/* ==================================================
   05. NAVBAR
================================================== */

.navbar{

    position:fixed;
    top:0;
    left:0;
    right:0;

    z-index:1000;

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

    padding:18px 32px;

    transition:.3s;
}

.navbar.scrolled{
    background:rgba(10,22,40,.95);
    backdrop-filter:blur(12px);
}

.navbar-brand{
    color:#fff;
    font-weight:700;
    font-size:1rem;
}

.navbar-brand:hover{
    color:#fff;
}

.navbar-links{
    display:flex;
    gap:24px;
}

.navbar-links a{
    color:rgba(255,255,255,.8);
    font-size:.9rem;
}

.navbar-links a:hover{
    color:#fff;
}

.navbar-links a.active{
    color:#fff;
    position:relative;
}

.navbar-links a.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:100%;
    height:2px;

    background:var(--blue);
}

/* ==================================================
   06. HERO
================================================== */

.hero{

    position:relative;

    min-height:100vh;

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

    text-align:center;

    padding:120px 24px 80px;

    overflow:hidden;
}

.hero-bg{

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(10,22,40,.95),
        rgba(10,22,40,.60)
    );
}

.hero-content{

    position:relative;
    z-index:2;

    max-width:850px;
}

.hero-badge{

    display:inline-block;

    padding:6px 16px;

    border-radius:20px;

    background:rgba(37,99,235,.25);

    color:#93c5fd;

    font-size:.75rem;
    font-weight:700;

    margin-bottom:24px;
}

.hero h1{

    font-size:clamp(40px,7vw,72px);

    color:#fff;

    font-weight:900;

    margin-bottom:20px;
}

.hero-sub{

    color:rgba(255,255,255,.85);

    max-width:700px;

    margin:0 auto 32px;

    font-size:1.1rem;
}

/* ==================================================
   07. BUTTONS
================================================== */

.btn-group{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;
}

.btn{

    display:inline-flex;

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

    padding:14px 28px;

    border-radius:8px;

    font-weight:600;

    transition:.2s;
}

.btn-primary{

    background:var(--blue);
    color:#fff;
}

.btn-primary:hover{

    background:var(--blue-light);
    color:#fff;
}

.btn-ghost{

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

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

    color:#fff;
}

.btn-ghost:hover{

    color:#fff;

    background:rgba(255,255,255,.18);
}

/* ==================================================
   08. TÍTULOS DE SEÇÃO
================================================== */

.section-header-center{

    text-align:center;

    margin-bottom:48px;
}

.section-label{

    color:var(--blue);

    font-size:.75rem;
    font-weight:700;

    text-transform:uppercase;

    margin-bottom:8px;
}

.section-title{

    font-size:clamp(28px,4vw,42px);

    font-weight:800;
}

/* ==================================================
   09. CARDS
================================================== */

.card{

    background:#fff;

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

    border-radius:16px;

    box-shadow:var(--shadow);
}

.highlight-grid{

    display:grid;

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

    gap:24px;
}

.highlight-card{

    background:#fff;

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

    border-radius:16px;

    padding:28px;

    box-shadow:var(--shadow);

    transition:.2s;
}

.highlight-card:hover{
    transform:translateY(-4px);
}

.highlight-card.blue{
    border-top:4px solid var(--blue);
}

.highlight-card.green{
    border-top:4px solid var(--green);
}

.highlight-card.purple{
    border-top:4px solid var(--purple);
}

.highlight-icon{
    font-size:2rem;
    margin-bottom:12px;
}

.highlight-title{
    font-size:.8rem;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
}

.highlight-value{
    font-size:1.2rem;
    font-weight:700;
    margin:8px 0;
}

.highlight-desc{
    color:var(--text-soft);
}

/* ==================================================
   10. QUICK LINKS
================================================== */

.quick-grid{

    display:grid;

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

    gap:24px;
}

.quick-card{

    background:#fff;

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

    border-radius:16px;

    padding:24px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.2s;
}

.quick-card:hover{
    transform:translateY(-4px);
}

.quick-icon{
    font-size:2rem;
    margin-bottom:12px;
}

.quick-title{
    font-weight:700;
}

/* ==================================================
   11. TAGS
================================================== */

.tech-tags{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;
}

.tech-tag{

    background:var(--blue-bg);

    color:var(--blue);

    border:1px solid rgba(37,99,235,.15);

    border-radius:999px;

    padding:8px 14px;

    font-size:.9rem;
    font-weight:600;
}

/* ==================================================
   12. TEAM
================================================== */

.team-grid{

    display:grid;

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

    gap:24px;
}

.team-card{

    background:#fff;

    border-radius:20px;

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

    box-shadow:var(--shadow);

    text-align:center;

    padding:32px 24px;
}

.team-initial{

    width:80px;
    height:80px;

    border-radius:50%;

    margin:0 auto 16px;

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

    font-size:2rem;
    font-weight:700;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--blue),
        var(--blue-light)
    );
}

.team-name{
    font-weight:700;
    margin-bottom:8px;
}

.team-role{
    font-size:.9rem;
    color:var(--muted);
}

/* ==================================================
   13. PAGE HEADER
================================================== */

.page-header{

    padding:140px 0 60px;

    background:var(--bg);
}

.page-title{

    font-size:clamp(36px,5vw,56px);

    font-weight:800;
}

.page-subtitle{

    max-width:700px;

    margin-top:16px;

    color:var(--text-soft);
}

/* ==================================================
   14. BREADCRUMB
================================================== */

.breadcrumb{

    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:20px;

    color:var(--muted);

    font-size:.9rem;
}

/* ==================================================
   15. TABLES
================================================== */

.table{

    width:100%;

    border-collapse:collapse;
}

.table th{

    background:var(--bg);

    text-align:left;
}

.table th,
.table td{

    padding:12px;

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

/* ==================================================
   16. ALERTS
================================================== */

.alert{

    padding:16px;

    border-radius:8px;

    margin-bottom:24px;
}

.alert-info{
    background:#eff6ff;
    color:#1d4ed8;
}

.alert-success{
    background:#ecfdf5;
    color:#065f46;
}

.alert-warning{
    background:#fffbeb;
    color:#92400e;
}

/* ==================================================
   17. LINKS ÚTEIS
================================================== */

.contact-section{

    background:var(--navy);
    color:#fff;

    padding:80px 0;
}

.contact-inner{
    text-align:center;
}

.contact-inner h2{

    font-size:2rem;

    margin-bottom:24px;
}

.contact-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;
}

.contact-link{

    padding:12px 20px;

    border-radius:8px;

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

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

    color:#fff;
}

.contact-link:hover{

    color:#fff;

    background:rgba(255,255,255,.18);
}

/* ==================================================
   18. FOOTER
================================================== */

footer{

    background:#060e1a;

    text-align:center;

    padding:48px 24px;

    color:rgba(255,255,255,.6);
}

footer strong{

    display:block;

    color:#fff;

    margin-bottom:8px;
}

/* ==================================================
   19. RESPONSIVE
================================================== */

@media (max-width:992px){

    .highlight-grid{
        grid-template-columns:1fr;
    }

}

@media (max-width:768px){

    .navbar-links{
        display:none;
    }

    .hero{
        min-height:90vh;
    }

    .hero-sub{
        font-size:1rem;
    }

    .page-header{
        padding:120px 0 48px;
    }
}

@media (max-width:576px){

    .navbar{
        padding:16px;
    }

    .section{
        padding:60px 0;
    }

    .btn{
        width:100%;
    }
}