/* COLORS */

.bg-primary-custom {
    background-color: var(--primary);
}

.bg-primary-soft {
    background-color: var(--primary-soft);
}

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--text-muted) !important;
}

/* RADIUS */

.rounded-xl {
    border-radius: 16px;
}

.rounded-2xl {
    border-radius: 20px;
}

/* SHADOWS */

.shadow-soft {
    box-shadow:
        0 1px 2px rgba(16,24,40,0.05),
        0 1px 3px rgba(16,24,40,0.1);
}

.shadow-primary {
    box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}

/* SECTIONS */

.section-scroll {

}

/* TYPOGRAPHY */

h1 {
    font-weight: 800;
    letter-spacing: -0.5px;
}

.fw-black {
    font-weight: 800;
}

/* DARK SECTION */

#contato .bg-dark {
    background: linear-gradient(135deg, #0F172A, #1E293B) !important;
    border-radius: 20px;
}

/* MATERIAL ICONS */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24;
}

.sensitive-box{
    margin-top:1.5rem;               /* mt-6 */
    padding:1.5rem;                  /* p-6 */
    border-radius:.75rem;            /* rounded-xl */
    background:#eff6ff;              /* bg-blue-50 */
    border:1px solid #dbeafe;        /* border-blue-100 */
    position:relative;
    overflow:hidden;
}

.sensitive-icon-bg{
    position:absolute;
    top:0;
    right:0;
    padding:1rem;
    opacity:.10;                     /* opacity-10 */
}

.sensitive-icon-bg .material-symbols-outlined{
    font-size:8rem;                  /* text-9xl */
}

.sensitive-content{
    position:relative;
    z-index:10;
}

.sensitive-header{
    display:flex;
    align-items:center;
    gap:.75rem;                      /* gap-3 */
    margin-bottom:.75rem;            /* mb-3 */
    color:#135bec;                   /* text-primary */
}

.sensitive-header h3{
    font-weight:700;
    font-size:1.125rem;              /* text-lg */
    margin:0;
}

.sensitive-text{
    font-size:.875rem;               /* text-sm */
    line-height:1.625;               /* leading-relaxed */
    color:#111318;                   /* text-text-main */
    max-width:42rem;                 /* max-w-2xl */
    margin-bottom:.75rem;
}

.sensitive-list{
    display:grid;
    grid-template-columns:1fr;
    gap:.5rem;                       /* gap-2 */
    font-size:.875rem;               /* text-sm */
    color:#616f89;                   /* text-text-secondary */
    padding:0;
    list-style:none;
}

.sensitive-list li{
    display:flex;
    align-items:center;
    gap:.5rem;
}

.sensitive-list .material-symbols-outlined{
    font-size:1rem;                  /* text-base */
}

/* Responsividade igual ao sm:grid-cols-2 */
@media (min-width:640px){
    .sensitive-list{
        grid-template-columns:1fr 1fr;
    }
}

/* container externo */
.sidebar-download-wrapper{
    margin-top:1rem;          /* mt-4 */
    padding-left:.75rem;      /* px-3 */
    padding-right:.75rem;
}

/* card */
.sidebar-download{
    background:#eff6ff;       /* bg-blue-50 */
    border:1px solid #dbeafe; /* border-blue-100 */
    border-radius:.75rem;     /* rounded-xl */
    padding:1rem;             /* p-4 */
}

/* layout interno */
.sidebar-download-content{
    display:flex;
    align-items:flex-start;
    gap:.75rem;               /* gap-3 */
}

/* ícone */
.sidebar-download-icon{
    color:#135bec;
    font-size:1.5rem;         /* text-2xl */
}

/* título */
.sidebar-download-title{
    font-size:.875rem;        /* text-sm */
    font-weight:700;
    color:#111318;            /* text-text-main */
    margin:0;
}

/* subtítulo */
.sidebar-download-subtitle{
    font-size:.75rem;         /* text-xs */
    color:#616f89;            /* text-text-secondary */
    margin-top:.25rem;        /* mt-1 */
    margin-bottom:.75rem;     /* mb-3 */
}

/* botão */
.sidebar-download-btn{
    font-size:.75rem;         /* text-xs */
    font-weight:600;          /* font-semibold */
    color:#135bec;
    text-decoration:underline;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}

.sidebar-download-btn:hover{
    color:#0e4ac4;            /* primary-hover */
}

.update-badge{
    font-size:.875rem;          /* text-sm */
    font-weight:500;            /* font-medium */
    color:#616f89;              /* text-text-secondary */
    background:#f9fafb;         /* bg-gray-50 */
    padding:.5rem 1rem;         /* py-2 px-4 */
    border-radius:.5rem;        /* rounded-lg */
    border:1px solid #f3f4f6;   /* border-gray-100 */
    white-space:nowrap;         /* whitespace-nowrap */
    display:inline-block;
}

.update-badge-label{
    display:block;
    font-size:.75rem;           /* text-xs */
    text-transform:uppercase;
    letter-spacing:.025em;      /* tracking-wide */
    color:#9ca3af;              /* text-gray-400 */
    margin-bottom:.25rem;       /* mb-1 */
}

/* wrapper externo */
.page-header{
    margin-bottom:2.5rem;        /*  */
    padding-bottom:1.5rem;       /*  */
    border-bottom:1px solid #e5e7eb; /* border-gray-200 */
}

/* layout */
.page-header-inner{
    display:flex;
    flex-direction:column;
    gap:1rem;                    /* gap-4 */
}

@media (min-width:768px){
    .page-header-inner{
        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
    }
}

/* badge */
.header-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;                   /* gap-2 */
    padding:.25rem .25rem;       /* py-1 px-3 */
    border-radius:9999px;
    background:#eff6ff;          /* blue-50 */
    color:#1d4ed8;               /* blue-700 */
    font-size:.75rem;            /* text-xs */
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.025em;       /* tracking-wide */
}

/* H1 */
.header-title{
    font-size:1.875rem;          /* text-3xl */
    font-weight:900;             /* font-black */
    line-height:1.25;            /* leading-tight */
    color:#111318;               /* text-text-main */
}

@media (min-width:768px){
    .header-title{
        font-size:2.25rem;       /* text-4xl */
    }
}

/* subtitle */
.header-subtitle{
    font-size:1.25rem;           /* text-xl */
    font-weight:300;             /* font-light */
    color:#616f89;               /* text-text-secondary */
}

.sidebar{
    position: sticky;
    top: 80px; /* altura do header */
    height: calc(100vh - 80px);
    overflow-y: auto;
}