/* =========================================================
   licoes-blocos-extras.css  —  v4 - 27 DE ABRIL
   Componentes visuais dos blocos de lição:
   separador de seção, boxes especiais com ícone SVG,
   tabela comparativa, linha do tempo.

   Fonte adicional para tabelas: Nunito (importada aqui)
   Ícones: assets/imgs/blocos/blocos_*.svg
   Caminho relativo ao CSS: ../imgs/blocos/

   Ordem de carregamento recomendada:
   1. base.css  2. layout-shell.css  3. licoes.css
   4. licoes-blocos-extras.css  5. licoes-inline-editor.css
   6. licoes-intro.css
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');


/* =========================================================
   1. SEPARADOR DE SEÇÃO INTERNA
   ========================================================= */

.bloco-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 54px 0 46px;
	font-family:'Winky Sans', arial, sans-serif;
	font-size:1.1rem;
}

.bloco-section-divider::before,
.bloco-section-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(156, 200, 208, .55), transparent);
    border-radius: 2px;
}

.bloco-section-divider span {
    font-family: 'Winky Sans', Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #6216AB !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    padding: 3px 12px;
    background: #F4E8FF !important;
    border-radius: 20px;
}

body.page-licao .bloco-section-divider span {
    color: #9e5c6e;
    background: rgba(158, 92, 110, .07);
}


/* =========================================================
   2. BASE COMPARTILHADA — todos os boxes especiais

   Estrutura HTML:
   <div class="box-[tipo]">
     <div class="box-icon" aria-hidden="true"></div>
     <div class="box-body">
       <p class="box-label">Rótulo</p>
       <p>Conteúdo…</p>
     </div>
   </div>
   ========================================================= */

.box-destaque,
.box-resumo,
.box-dica,
.box-atencao,
.box-reflexao,
.box-exercicio,
.box-cinema,
.box-nota {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 22px 10px 5px 10%;
    padding: 20px 22px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
	width:90%;
}

.box-destaque::after,
.box-resumo::after,
.box-dica::after,
.box-atencao::after,
.box-reflexao::after,
.box-exercicio::after,
.box-cinema::after,
.box-nota::after {
    content: "";
    position: absolute;
    bottom: -22px;
    right: -22px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: .06;
    pointer-events: none;
    background: currentColor;
}

.box-icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    background-size: 90% 90%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 1px;
}

.box-body {
    flex: 1 1 auto;
    min-width: 0;
}

.box-body > * + * { margin-top: .5em; }
.box-body > *:first-child { margin-top: 0; }
.box-body > *:last-child  { margin-bottom: 0; }

.box-label {
    font-family: 'Winky Sans', arial, sans-serif !important;
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
}

.box-body p {
    font-family: var(--font-lesson);
    font-size: clamp(1rem, .9rem + .3vw, 1.25rem);
    line-height: 1.75 !important;
    margin: 0 !important;
    color: inherit;
}

.box-body p + p { margin-top: .5em !important; }

.box-body strong {
    font-family: 'Winky Sans', arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}

.box-body ul,
.box-body ol {
    font-family: var(--font-lesson);
    font-size: clamp(1rem, .9rem + .3vw, 1.1rem);
    line-height: 1.72;
    margin: 6px 0 0 18px;
    padding-left: 1.2em;
}

.box-body li { margin-bottom: .45em; }


/* =========================================================
   3. BOX DESTAQUE — lista de pilares / pontos principais
      Ícone: blocos_bloco.svg  |  Cor: azul-ardósia
   ========================================================= */

.box-destaque {
    background: linear-gradient(145deg, #EEF5FF 0%, #DDE9FF 100%);
    border: 1.5px solid #A8C4F0;
    box-shadow: -1px 1px 2px rgba(74, 134, 200, .13), -1px 1px 2px rgba(0,0,0,.05);
    color: #1A3060;
}

.box-destaque .box-icon {
    background-image: url('../imgs/blocos/blocos_bloco.svg');
}

.box-destaque .box-label  { color: #1A4A8A !important; }
.box-destaque .box-body strong { color: #1A4A8A !important; }

.box-destaque.box-destaque--azul {
    background: linear-gradient(145deg, #EDFAF8 0%, #D4F5F0 100%);
    border-color: #7DD4CC;
    color: #0D4440;
}
.box-destaque.box-destaque--azul .box-label { color: #0A5A54 !important; }

.box-destaque.box-destaque--amarelo {
    background: linear-gradient(145deg, #FFFBEA 0%, #FFF3C4 100%);
    border-color: #F0D060;
    color: #4A3800;
}
.box-destaque.box-destaque--amarelo .box-label  { color: #7A5C00 !important; }
.box-destaque.box-destaque--amarelo .box-body strong { color: #7A5C00 !important; }


/* =========================================================
   4. BOX RESUMO — síntese / pontos consolidados
      Ícone: blocos_nota.svg  |  Cor: verde-esmeralda
   ========================================================= */

.box-resumo {
    background: linear-gradient(145deg, #EDFAF2 0%, #D4F5E2 100%);
    border: 1.5px solid #7DD4A8;
    box-shadow: 0 4px 18px rgba(29, 140, 80, .11), 0 1px 4px rgba(0,0,0,.05);
    color: #0D3D22;
}

.box-resumo .box-icon {
    background-color: #B8EDD0;
    background-image: url('../imgs/blocos/blocos_nota.svg');
}

.box-resumo .box-label  { color: #0A5A30 !important; }
.box-resumo .box-body strong { color: #0A5A30 !important; }


/* =========================================================
   5. BOX DICA — sugestão prática, dica de estudo
      Ícone: blocos_dica.svg  |  Cor: amarelo-âmbar
   ========================================================= */

.box-dica {
    background: linear-gradient(145deg, #FFFBEA 0%, #FFF0B8 100%);
    border: 1.5px solid #F5D040;
    box-shadow: 0 4px 18px rgba(200, 160, 0, .13), 0 1px 4px rgba(0,0,0,.05);
    color: #3D2E00;
}

.box-dica .box-icon {
    background-image: url('../imgs/blocos/blocos_dica.svg');
}

.box-dica .box-label  { color: #7A5C00 !important; }
.box-dica .box-body strong { color: #7A5C00 !important; }


/* =========================================================
   6. BOX ATENÇÃO — alertas, pontos críticos
      Ícone: blocos_atencao.svg  |  Cor: coral-vermelho
   ========================================================= */

.box-atencao {
    background: linear-gradient(145deg, #FFF2F0 0%, #FFE0DC 100%);
    border: 1.5px solid #F5A090;
    box-shadow: 0 4px 18px rgba(200, 80, 60, .12), 0 1px 4px rgba(0,0,0,.05);
    color: #3D1008;
}

.box-atencao .box-icon {
    background-image: url('../imgs/blocos/blocos_atencao.svg');
}

.box-atencao .box-label  { color: #A0200A !important; }
.box-atencao .box-body strong { color: #A0200A !important; }


/* =========================================================
   7. BOX REFLEXÃO — perguntas de reflexão crítica
      Ícone: blocos_ok.svg  |  Cor: teal suave
   ========================================================= */

.box-reflexao {
    background: linear-gradient(145deg, #F0FAF8 0%, #D8F3EE 100%);
    border: 1.5px solid #70C8BC;
    box-shadow: 0 4px 18px rgba(30, 140, 130, .11), 0 1px 4px rgba(0,0,0,.05);
    color: #0A3830;
}

.box-reflexao .box-icon {
    background-image: url('../imgs/blocos/blocos_ok.svg');
}

.box-reflexao .box-label  { color: #0A5448 !important; }
.box-reflexao .box-body strong { color: #0A5448 !important; }


/* =========================================================
   8. BOX EXERCÍCIO — atividade para fazer no papel
      Ícone: blocos_exercicio.svg  |  Cor: pêssego-terracota
   ========================================================= */

.box-exercicio {
    background: linear-gradient(145deg, #FFF8F2 0%, #FFE8D4 100%);
    border: 1.5px solid #F0A870;
    box-shadow: 0 4px 18px rgba(190, 120, 50, .12), 0 1px 4px rgba(0,0,0,.05);
    color: #3D1E00;
}

.box-exercicio .box-icon {
    background-image: url('../imgs/blocos/blocos_exercicio.svg');
}

.box-exercicio .box-label  { color: #A04800 !important; }
.box-exercicio .box-body strong { color: #A04800 !important; }


/* =========================================================
   9. BOX CINEMA — "E se fosse no cinema / Harry Potter…"
      Ícone: blocos_atencao.svg (megafone)  |  Cor: roxo-uva
   ========================================================= */

.box-cinema {
    background: linear-gradient(145deg, #F8F2FF 0%, #EDE0FF 100%);
    border: 1.5px solid #C090F0;
    box-shadow: 0 4px 18px rgba(120, 60, 200, .13), 0 1px 4px rgba(0,0,0,.05);
    color: #2A0A50;
}

.box-cinema .box-icon {
    background-image: url('../imgs/blocos/blocos_atencao.svg');
}

.box-cinema .box-label  { color: #6A20C0 !important; }
.box-cinema .box-body p {
    font-style: italic !important;
    font-weight: 500 !important;
    color: #4A10A0 !important;
}
.box-cinema .box-body strong { color: #6A20C0 !important; }


/* =========================================================
   10. BOX NOTA — curiosidade, informação complementar
       Ícone: blocos_materia.svg  |  Cor: ardósia neutro
   ========================================================= */

.box-nota {
    background: linear-gradient(145deg, #F4F6FA 0%, #E8ECF5 100%);
    border: 1.5px solid #A8B8D8;
    box-shadow: 0 4px 18px rgba(60, 80, 140, .10), 0 1px 4px rgba(0,0,0,.05);
    color: #1A2440;
}

.box-nota .box-icon {
    background-image: url('../imgs/blocos/blocos_materia.svg');
}

.box-nota .box-label  { color: #2A3A6A !important; }
.box-nota .box-body strong { color: #2A3A6A !important; }


/* =========================================================
   11. TABELA COMPARATIVA
       Fonte: Nunito  |  Cabeçalho laranja por padrão
       Variantes: --verde, --azul, --roxo
   ========================================================= */

.compare-table-wrap {
    overflow-x: auto;
    margin: 18px 0;
    border-radius: 16px;
    box-shadow: -1px 1px 2px rgba(0,0,0,.18);
}

thead th{
    border-left: 1px dashed #fff !important;
	border-right:1px dashed #fff;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(.88rem, .8rem + .25vw, 1rem);
    line-height: 1.5;
    min-width: 0;
}

.compare-table th {
    background: linear-gradient(to bottom, #E0B31F 0%, #D1A619 100%);
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-size: .90rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
	text-shadow: -1px 1px 1px rgba(0,0,0,.3);
    border: none;
}

.compare-table td {
    padding: 11px 16px;
    border-bottom: 1px solid rgba(156, 200, 208, .30);
    vertical-align: top;
    color: #1A2A3A;
    background: #ffffff;
    font-weight: 400;
}

.compare-table tr:nth-child(even) td { background: #F5FAFD; }
.compare-table tr:last-child td { border-bottom: none; }

.compare-table td strong {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #0A4060;
}

.compare-table--verde th {
    background: linear-gradient(135deg, #1D9A6C 0%, #166B4A 100%);
}

.compare-table--azul th {
    background: linear-gradient(135deg, #2A72C8 0%, #1A5299 100%);
}

.compare-table--roxo th {
    background: linear-gradient(135deg, #7B3FC8 0%, #5A2A9A 100%);
}

@media (max-width: 640px) {
    .compare-table th,
    .compare-table td {
        padding: 9px 12px;
        font-size: .85rem;
    }
}


/* =========================================================
   12. LINHA DO TEMPO — timeline-strip / timeline-item
   ========================================================= */

.timeline-strip {
    display: flex;
    gap: 0;
    margin: 18px 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid rgba(156, 200, 208, .50);
    box-shadow: var(--sombra-fina);
}

.timeline-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 12px;
    text-align: center;
    background: rgba(248, 253, 255, .88);
    border-right: 1px solid rgba(156, 200, 208, .40);
    transition: background .18s ease;
}

.timeline-item:last-child { border-right: 0; }
.timeline-item:hover { background: rgba(229, 246, 252, .95); }

.timeline-item strong {
    display: block;
    font-family: var(--font-kids);
    font-size: 1rem;
    font-weight: 700;
    color: #0b5e7a;
    line-height: 1.2;
}

.timeline-item span {
    display: block;
    font-family: var(--font-primary);
    font-size: .80rem;
    color: #496271;
    line-height: 1.45;
}

body.page-licao .timeline-item strong { color: #9e5c6e; }

@media (max-width: 640px) {
    .timeline-strip { flex-direction: column; }

    .timeline-item {
        border-right: 0;
        border-bottom: 1px solid rgba(156, 200, 208, .40);
        text-align: left;
        padding: 11px 14px;
    }

    .timeline-item:last-child { border-bottom: 0; }
}


/* =========================================================
   13. RESPONSIVO — boxes em telas pequenas
   ========================================================= */

@media (max-width: 520px) {
    .box-destaque,
    .box-resumo,
    .box-dica,
    .box-atencao,
    .box-reflexao,
    .box-exercicio,
    .box-cinema,
    .box-nota {
        flex-direction: column;
        gap: 12px;
        padding: 18px 16px;
    }

    .box-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
}