/**
 * Kat Blocks — shared.css
 * ATENÇÃO: Este arquivo NÃO é carregado automaticamente pelo plugin.
 * Inclua-o no seu tema ou num bloco que seja sempre exibido (ex: topbar).
 *
 * Contém: tokens globais, container, utilitários e estilos base
 * utilizados por todos os blocos Kat.
 */

/* ── Tokens globais ──────────────────────────────────────────────────────── */
:root {
    --kbpm-primary:      #0b2e5e;
    --kbpm-accent:       #e8610a;
    --kbpm-accent-lt:    #fdf0e8;
    --kbpm-text:         #1e293b;
    --kbpm-muted:        #64748b;
    --kbpm-border:       #e4e6ea;
    --kbpm-bg-alt:       #f8f9fb;
    --kbpm-bg-alt2:      #eef2f7;
    --kbpm-radius-sm:    6px;
    --kbpm-radius-md:    12px;
    --kbpm-radius-lg:    20px;
    --kbpm-shadow-card:  0 4px 24px rgba(11,46,94,.08);
    --kbpm-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset mínimo ────────────────────────────────────────────────────────── */
.kbpm-hero, .kbpm-section, .kbpm-cta-strip, .kbpm-footer, .kbpm-topbar {
    box-sizing: border-box;
}

/* ── Container ───────────────────────────────────────────────────────────── */
.kbpm-container {
    max-width:    1180px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

/* ── Seções padrão ───────────────────────────────────────────────────────── */
.kbpm-section {
    padding: 80px 0;
}

.kbpm-section-white  { background: #fff; }
.kbpm-section-alt    { background: var(--kbpm-bg-alt); }
.kbpm-section-alt2   { background: var(--kbpm-bg-alt2); }

/* ── Tipografia de seções ────────────────────────────────────────────────── */
.kbpm-eyebrow {
    display:        block;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--kbpm-accent);
    margin-bottom:  10px;
}

.kbpm-section-title {
    font-size:     clamp(1.6rem, 3vw, 2.4rem);
    font-weight:   700;
    color:         var(--kbpm-primary);
    line-height:   1.2;
    margin-bottom: 16px;
}

.kbpm-section-subtitle {
    font-size:   1.05rem;
    color:       var(--kbpm-muted);
    line-height: 1.7;
    margin-bottom: 0;
}

.kbpm-lead {
    font-size:   1.1rem;
    font-weight: 500;
    line-height: 1.7;
    color:       var(--kbpm-text);
    margin-bottom: 20px;
}

/* ── Utilitários ─────────────────────────────────────────────────────────── */
.kbpm-text-center  { text-align: center; }
.kbpm-mx-auto      { max-width: 640px; margin-inline: auto; }
.kbpm-mb5          { margin-bottom: 56px; }
.kbpm-w100         { width: 100%; }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.kbpm-topbar {
    background: var(--kbpm-primary);
    padding:    10px 0;
    font-size:  13px;
    color:      rgba(255,255,255,.8);
}

.kbpm-topbar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
}

.kbpm-topbar-left {
    display:   flex;
    gap:       20px;
    flex-wrap: wrap;
}

.kbpm-topbar-item {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.kbpm-topbar-social {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.kbpm-topbar-social a {
    color:      rgba(255,255,255,.7);
    font-size:  15px;
    transition: color .2s;
}

.kbpm-topbar-social a:hover { color: #fff; }

/* ── Intro / About ───────────────────────────────────────────────────────── */
.kbpm-intro-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   60px;
    align-items:           start;
}

.kbpm-highlight-box {
    background:    #fff;
    border-radius: var(--kbpm-radius-md);
    padding:       32px;
    box-shadow:    var(--kbpm-shadow-card);
    border:        1px solid var(--kbpm-border);
}

.kbpm-highlight-box h3 {
    font-size:     1rem;
    font-weight:   600;
    color:         var(--kbpm-primary);
    margin-bottom: 20px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.kbpm-highlight-box h3 .bi {
    color:     var(--kbpm-accent);
    font-size: 20px;
}

.kbpm-checklist {
    list-style: none;
    padding:    0;
    margin:     0;
}

.kbpm-checklist li {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       8px 0;
    border-bottom: 1px solid var(--kbpm-border);
    font-size:     .9rem;
    line-height:   1.5;
    color:         var(--kbpm-text);
}

.kbpm-checklist li:last-child { border-bottom: none; }

.kbpm-checklist .bi {
    color:     var(--kbpm-accent);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Instrutor ───────────────────────────────────────────────────────────── */
.kbpm-instructor-grid {
    display:               grid;
    grid-template-columns: 280px 1fr;
    gap:                   60px;
    align-items:           start;
}

.kbpm-instructor-photo-img {
    width:         100%;
    aspect-ratio:  3/4;
    object-fit:    cover;
    border-radius: var(--kbpm-radius-lg);
    box-shadow:    var(--kbpm-shadow-card);
}

.kbpm-instructor-photo-img[src=""] {
    display: none;
}

.kbpm-instructor-name {
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--kbpm-primary);
    margin-bottom: 6px;
}

.kbpm-instructor-role {
    font-size:     .95rem;
    color:         var(--kbpm-accent);
    font-weight:   600;
    margin-bottom: 20px;
}

.kbpm-instructor-bio {
    color:       var(--kbpm-text);
    line-height: 1.7;
    margin-bottom: 24px;
}

.kbpm-credentials {
    display:   flex;
    flex-direction: column;
    gap:       12px;
}

.kbpm-cred-item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   .9rem;
    line-height: 1.5;
    color:       var(--kbpm-text);
}

.kbpm-cred-item .bi {
    color:      var(--kbpm-accent);
    font-size:  16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.kbpm-footer {
    background:  var(--kbpm-primary);
    color:       rgba(255,255,255,.75);
    padding:     60px 0 32px;
}

.kbpm-footer-brand {
    text-align:    center;
    margin-bottom: 40px;
}

.kbpm-footer-logo {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    background:      var(--kbpm-accent);
    border-radius:   12px;
    font-size:       22px;
    font-weight:     800;
    color:           #fff;
    margin-bottom:   14px;
}

.kbpm-footer-name {
    display:     block;
    font-size:   1.15rem;
    font-weight: 700;
    color:       #fff;
}

.kbpm-footer-tagline {
    display:     block;
    font-size:   .82rem;
    color:       rgba(255,255,255,.55);
    margin-top:  4px;
    margin-bottom: 14px;
    letter-spacing: .04em;
}

.kbpm-footer-desc {
    max-width:   500px;
    margin:      0 auto 20px;
    font-size:   .9rem;
    line-height: 1.6;
}

.kbpm-footer-social {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
}

.kbpm-footer-social a {
    color:      rgba(255,255,255,.6);
    font-size:  20px;
    transition: color .2s;
}

.kbpm-footer-social a:hover { color: #fff; }

.kbpm-footer-bottom {
    border-top:  1px solid rgba(255,255,255,.1);
    padding-top: 24px;
    text-align:  center;
    font-size:   .82rem;
}

.kbpm-footer-bottom p { margin: 0 0 6px; }

.kbpm-footer-links a {
    color:           rgba(255,255,255,.6);
    text-decoration: none;
    margin:          0 6px;
    transition:      color .2s;
}

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

.kbpm-footer-links span { color: rgba(255,255,255,.3); }

/* ── Responsivo global ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .kbpm-intro-grid        { grid-template-columns: 1fr; }
    .kbpm-instructor-grid   { grid-template-columns: 1fr; }
    .kbpm-instructor-photo-img { max-width: 280px; }
}

@media (max-width: 600px) {
    .kbpm-section { padding: 52px 0; }
    .kbpm-topbar-left { display: none; }
}


.banner-page {
	background: linear-gradient(163deg, #ff737a 8%, #e7000b 50%, #c10007 69%);
}
.banner-green{
	background: linear-gradient(180deg, #00a63e 0%, #006d29 100%);
}

.banner-yellow{
	background: linear-gradient(180deg, #f0b100 0%, #a67a00 100%);
}

.banner-blue{
	background: linear-gradient(180deg, #16A5D8 0%, #0C5772 100%);
}

.banner-red{
	background: linear-gradient(180deg, #FD545C 0%, #C10007 100%);
}

.banner-orange{
	background: linear-gradient(180deg, #D87A16 0%, #72320C 100%);
}

.banner-pink{
	background: linear-gradient(to bottom, #d64aa5 0%, rgba(137, 49, 106, 0.6) 100%);
}

.banner-white{
    background:linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 50%, #FAF2F7 100%);
}





.card-red{background-color: #E7000B;}
.card-green{background-color: #00A63E;}
.card-yellow{background-color: #F0B100;}
.card-blue{background-color: #16A5D8;}
.card-orange{background-color: #D87A16;}
.card-pink{background-color: #D64AA5;}
.card-white{background-color: #F0F9FF;}
.card-violet{background-color: #9333EA;}
.card-pessego{background-color: #DC2626;}
.bullet-00A63E li::marker{
    color: #00A63E;
}
.bullet-F0B100 li::marker{
    color: #F0B100;
}
.bullet-16A5D8 li::marker{
    color: #16A5D8;
}
.bullet-E7000B li::marker{
    color: #E7000B;
}
.bullet-D87A16 li::marker{
    color: #D87A16;
}
.bullet-D64AA5 li::marker{
    color: #D64AA5;
}
.bullet-9333EA li::marker{
    color: #9333EA;
}
.bullet-DC2626 li::marker{
    color: #DC2626;
}
.social-contacts {
	margin: 2rem auto 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: center;
	justify-content: center;
}

.social-icon {
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Example implementations based on user request pattern */
.social-icon-whatsapp {
    background-image: url('../../image/social-whatsapp.svg');
}

/* Ensure other icons have at least a background color if image is missing */
.social-icon-facebook {
    background-image: url('../../image/social-facebook.svg');
}

.social-icon-instagram {
    background-image: url('../../image/social-instagram.svg');
}

.social-icon-linkedin {
    background-image: url('../../image/social-linkedin.svg');
}

.social-icon-youtube {
    background-image: url('../../image/social-youtube.svg');
}

.social-icon-spotify {
    background-image: url('../../image/social-spotify.svg');
}

.social-icon-telegram {
    background-image: url('../../image/social-telegram.svg');
}