/* Estilos específicos para a Seção de Introdução */
.section-wrapper { 
    min-height: 55vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 60px 20px; 
    overflow: visible; 
    position: relative;
}

/* Novo estilo para o subtítulo */
.intro-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 500;
    line-height: 1.4;
    color: #444;
    max-width: 600px;
    margin: 20px auto 0 auto;
    text-align: center;
    text-wrap-mode: nowrap;
}

/* Estilos dos avatares de professores */
.teachers-row { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    flex-wrap: wrap; 
    margin-top: 30px; 
}

.teacher-pill { 
    background: rgba(255, 255, 255, 0.95); 
    border: 1px solid var(--primary-green); 
    padding: 5px 20px 5px 5px; 
    border-radius: 50px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

.avatar { 
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 1px solid var(--border-color); 
}

.teacher-name { 
    font-weight: 700; 
    font-size: 1.1rem; 
    color: var(--primary-green); 
}

.bg-image-drawn {
    height: 140px;
    width: 100%;
    margin-bottom: 25px;
    background-image: url('/assets/2025-05 - Cambacica 4 - B.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-blend-mode: multiply;
}

/* Painel com Ilustrações nas Laterais (Fixed/Sticky APENAS Dentro dos Limites do Card) */
.paper-panel.intro-drawn-panel {
    position: relative;
    padding: 50px 30px;
    isolation: isolate;
}

.intro-text-container {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    width: 100%;
}

p.paragraph.tetx-justfy {
    margin-bottom: 1.8em;
    text-align: justify !important;
    line-height: 1.65;
}

.bg-drawn {
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
}

/* --- DESKTOP E TABLET HORIZONTAL (> 850px): Fixed/Sticky APENAS dentro do card --- */
@media (min-width: 851px) {
    .paper-panel.intro-drawn-panel {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .intro-text-container {
        padding: 0 35px;
        max-width: 880px;
        margin: 0 auto;
        box-sizing: border-box;
        flex: 1;
    }

    .bg-drawn {
        position: sticky;
        top: calc(50vh - 135px); /* Efeito fixed centralizado a 50% da tela enquanto rola dentro do card */
        flex-shrink: 0;
    }

    .drawn-1 {
        background-image: url('/assets/2025-05 - Quero-quero 2-jose-augsuto-novas.png');
        width: 155px;
        height: 270px;
        background-position: center left;
        opacity: 0.9;
        margin-right: 15px;
    }

    .drawn-2 {
        background-image: url('/assets/arvore-jose-augsuto-novas.png');
        width: 155px;
        height: 280px;
        background-position: center right;
        opacity: 0.9;
        margin-left: 15px;
    }
}

/* --- MOBILE (<= 850px): Quando não cabe de lado, um fica em cima à DIREITA e outro embaixo à ESQUERDA --- */
@media (max-width: 850px) {
    .paper-panel.intro-drawn-panel {
        padding: 110px 20px 110px 20px; /* Margem vertical generosa para isolar os desenhos */
        display: block;
    }

    .intro-text-container {
        padding: 0;
        max-width: 100%;
    }

    .bg-drawn {
        position: absolute;
    }

    /* Desenho de Cima: Alinhado à DIREITA */
    .drawn-1 {
        background-image: url('/assets/2025-05 - Quero-quero 2-jose-augsuto-novas.png');
        top: 15px;
        right: 15px;
        left: auto;
        bottom: auto;
        transform: none;
        width: 85px;
        height: 95px;
        background-position: top right;
        opacity: 0.35;
    }

    /* Desenho do Final: Alinhado à ESQUERDA */
    .drawn-2 {
        background-image: url('/assets/arvore-jose-augsuto-novas.png');
        bottom: 15px;
        left: 15px;
        right: auto;
        top: auto;
        transform: none;
        width: 85px;
        height: 95px;
        background-position: bottom left;
        opacity: 0.35;
    }
}