/* ------------------------- Valquiria leao @2025 -----------------Arte3d---- */

/* ------------------------- AJUSTES GLOBAIS -------------------------------- */
*, *::before, *::after { box-sizing: border-box; } /* Magic Wand */

:root{
    --corCZ00: hsl(0, 0%, 0%);
    --corCZ10: hsl(0, 0%, 10%);
    --corCZ30: hsl(0, 0%, 30%);
    --corCZ35: hsl(0, 0%, 35%);
    --corCZ90: hsl(0, 0%, 90%);
    --corCZ100:hsl(0, 0%, 100%);
    
    --corYL80: hsl(40, 50%, 80%);
    
    --corGR70: hsl(150, 35%, 70%);

    --corBL15: hsl(210, 25%, 15%);
    --corBL20: hsl(210, 30%, 20%);
    --corBL25: hsl(210, 20%, 25%);
    --corBL35: hsl(210, 20%, 35%); /* p/ eventos.html */
    --corBL45: hsl(210, 15%, 45%);
    --corBL55: hsl(210, 15%, 55%);
    --corBL85: hsl(210, 55%, 85%);
    --corBL95: hsl(210, 30%, 95%);

    --corSL35: hsl(340, 40%, 35%); /* capa */
    --corSL70: hsl(340, 100%, 70%);
    --corSL75: hsl(340, 35%, 70%);

    --altBrTopo: 4rem;          /* altura da barra de menu e espaçamento */
    --espaco: 1rem;             /* espaço lateral padding e margin */
    min-width: 360px;
    margin: auto;               /* centraliza tudo :) */
}
html{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    background-color: var(--corCZ35);
}
body{
    color: var(--corCZ100);
    background-color: var(--corBL45);
    margin-top: var(--altBrTopo);           /* inicia abaixo do cabeçalho */
    border-left: 1px solid var(--corBL20);
    border-right: 1px solid var(--corBL20);
}

/* ------------------------- TAGS GERAIS ------------------------------------ */
.destacar:hover{                /* complemento  -  contraste com o mouse */
    background-color: var(--corBL35);
    transition: background-color 0.5s ease;
}

a:link{
    text-decoration: none;
    color: var(--corYL80);
}
a:hover{
    color: var(--corSL70);
}
a:visited{
    color: var(--corSL75);
}
a:visited:hover{
    color: var(--corSL70);
}
a:hover h3{                     /* titulo clicável */
    color: var(--corSL70);
}

/* ------------------------- CITAÇÕES --- */
blockquote{
    color: var(--corCZ100);
    text-align: right;
    padding-inline: 10% 2rem;       /* limita area da citação */
    margin: 2rem 0 1rem 0;
}
blockquote::before, blockquote::after { /* Aspas no bloco */
    content: open-quote;
}
.citar{                         /* título e autor na citação de blockquote */
    text-align:  right;
    padding-inline: 10% 2.5rem;
    margin-bottom: 2rem;
}
cite{                           /* nome da obra NÃO do Autor */
    font-weight: bold;
    color: var(--corCZ100);
}
q{                              /* citação inline */
    color: var(--corCZ100);
    font-size: 1.1rem;
    font-style: italic;
}
/* -------------------------------------- */

code{
    color: var(--corSL70);
    font-style: italic;
}
h1, h2, h3, h4, h5, h6{
    color: var(--corBL95);
    text-align: center;
}
/* ------------------------- TAMANHO dos TITULOS - celular */
h1{ font-size: 1.8rem; }
h2{ font-size: 1.5rem; }
h3{ font-size: 1.35rem; }

hr{
    width: 85%;
    border: none;
    border-top: 1px solid var(--corBL85);
    clear: both;                /* quebra de fluxo p/ imagens com texto curto */
    margin: 1.8rem auto;
} 

/* ------------------------- IMAGENS --- */
figure{                         /* caixa geral de imagens */
    width: 16rem;
    margin: 1.5rem auto;
}
figcaption{                     /* legenda imagens (opcional) */
    font-size: 0.85rem;
    text-align: center;
    color: var(--corCZ100);
    padding: 0.3rem 0;
}
img{
    display: block;
    width: 100%;                /* preenche todo container figure */
    max-width: 16rem;           /* tam. máximo sem figure */
    height: auto;
    margin: 0 auto;
}
/* ------------------------- TEXTOS --- */
p{
    padding-inline: var(--espaco);       /* move apenas elementos de text0 :( */
    line-height: 1.3;           /* melhorar a leitura do celular */
}
p.central{          /* complemento */
    text-align: center;
    margin: 0 auto;
}
p.justifica{        /* complemento */
    text-align: justify;
}
p.direita{          /* complemento */
    text-align: right;
}
/* ------------------------- CONTAINERS ------------------------------------- */

header.barra{                   /* bloco de fundo do cabeçalho de menu */
    position: fixed;
    z-index: 80;
    width: 100%;
    height: var(--altBrTopo);
    background-color: var(--corBL25);
    top: 0;
    left: 0;
}
p.sitename{                     /* nome do site na barra do header (celular) */
    font-size: 1.4rem;
    opacity: 0.8;
    font-weight: bold;
    text-align: right;
}

/* ------------------------- RODAPÉ DE ARTIGO ------------------------------- */
footer.notaRodape::before{      /* linha das notas de rodapé dos artigos */
    content: '';
    display: block;             /* Garante que se comporte como um bloco */
    width: 7rem;                /* Largura da LINHA */
    height: 1px;                /* Espessura */
    background-color: var(--corBL85);
    margin-left: 2rem;          /* ajusta a linha com a numeração */
    margin-bottom: 0.5rem;
}
footer.notaRodape{              /* footer para notas de rodapé */
    margin: 1.5rem 0 2rem 2rem;
}
footer.notaRodape p{            /* texto da nota */
    margin: 0 auto;
}
sup{                            /* para notas de rodapé */
    vertical-align: 4px;
}

/* ------------------------- RODAPÉ DO SITE --------------------------------- */
footer.site{                    /* footer do site no fim da página */
    display: flex;
    flex-direction: row;        /* caixas ficam lado-a-lado */
    justify-content: space-evenly;
    flex-wrap: wrap;

    width: 100%;
    background-color: var(--corBL15);
    padding-bottom: 1rem;
}
.caixa{                         /* conteúdo em colunas */
    display: flex;
    flex-direction: column;     /* conteúdo segue como colunas */
    min-width: 9.5rem;          /* max 2 caixas por linha */
    height: auto;
}
.caixafull{                     /* container cheio no footer */
    display: block;             /* só para garantir */
    width: 100%;
    margin-top: 1.5rem;
}
.site img{                      /* icones no footer rodapé */
    width: 2rem;
    height: auto;
}
.imagemlinha{                   /* alinha imagens das redes sociais */
    display:flex;
    justify-content: space-around;
}
p.autor{                        /* desenvolvedor e direitos */
    font-size: 0.8rem;
    text-align: center;
}
footer #vaiTopo{                /* icone que leva ao topo da tela */
    width: 2.1rem;
    height: auto;
}

/* ------------------------- COMPARTILHAR NAS REDES ------------------------- */
.compartilhe{                   /* caixa com ícones de compartilhamento */
    display: flex;
    flex-direction: column;     /* Itens em coluna para alinhar na vertical */
    align-items: center;        /* Centraliza os itens horizontalmente  */
    justify-content: center;    /* Centraliza os itens verticalmente */

    width: 90%;
    max-width: 28rem;

    background-color: var(--corBL20);
    border-radius: 1.5rem;
    filter: drop-shadow(1px 1px 4px var(--corCZ100));
    margin: 2rem auto 2rem auto;
}
.compartilhe p{
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;        /* Espaço entre o parágrafo e as imagens */
}
.compartilhe-box{               /* container das imagens */
    display: flex;              /* contêiner vira flexível */
    justify-content: center;    /* Centraliza horizontalmente */
    align-items: center;        /* Alinha verticalmente */
    padding-bottom: 1rem;
}
.compartilhe img{               /* ajuste de cada imagen */
    width: 2rem;
    height: auto;
    margin: 1rem 1.3rem;
}

/* ------------------------- FORMULARIO DE MSG ------------------------------ */
form.msg-container{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    background-color:var(--corBL25) ;
    padding-top: 1rem;
    margin-bottom: 1rem;
}
.msg-container input, textarea{
    background-color: var(--corBL85);     /* --corHr --corBgMain */
    outline: none;
    border: none;
    padding: 0.8rem;                    /* dentro da caixa */
}
.msg-container input:focus, textarea:focus{
    filter: drop-shadow(2px 2px 3px var(--corSL75));
}
.msg-container::placeholder{
    color: var(--corCZ30);
}
.fg{                            /* alinhar label e input */
    display: flex;
    flex-direction: row;
    align-items: center;
}
.msg-container label{
    width: 3.5rem;
    height: 1.7rem;
    align-content: center;      /* centraliza texto na vertical */
    margin: 0.45rem 0;
}
.msg-container input{
    width: 15rem;
    height: 1.8rem;
}
.msg-container textarea{
    width: 18.5rem;
    height: 18rem;
    outline: none;
    resize: none;
    overflow: hidden;
}
.msg-container button:focus{    /* para ficar igual aos campos de input */
    filter: drop-shadow(2px 2px 3px var(--corSL75));
    border: none;
    outline: none;
}
 button{                        /* botão para todo site */
    width: 6.3rem;
    height: 2rem;
    color: var(--corCZ100);
    background-color: var(--corBL25);
    border: none;
    margin: 0.8rem 0;
}

/* ------------------------- PEGA NÃO DESEJADO --- */
.filtro{                        /* esconde o label do mel */
    background: transparent;
    opacity: 0.02;
}
#familyName{
    position: absolute;
    z-index: -1;
    width: 1rem;
    height: 1rem;
    left: -1rem;                /* fora da tela */
    opacity: 0.2;               /* quase não visível */
    border: none;
    pointer-events: none;       /* impede interação por humanos */
}

/* ------------------------- FAQ -------------------------------------------- */
.faq2{
    width: 95%;
    border-radius: 1rem;
    margin: 0 auto;
}
.faq2 dl{                       /* folha de fundo */
    background-color: var(--corBL55);
    border: 2px solid var(--corBL25);
    border-radius: 1rem;
    filter: drop-shadow(1px 0px 12px hsla(60, 0%, 90%));
}
.faq2 dt{                       /* pergunta */
    width: 80%;
    color: var(--corBL95);
    background-color:var(--corBL25);
    border-radius: 0.8rem;
    padding: 0.4rem 1rem;
    margin: 1rem 0 0 0.8rem;
    filter: drop-shadow(1px 2px 2px var(--corCZ10));
}
.faq2 dd{                       /* resposta */
    text-align: justify;
    margin: 0.8rem 2rem 1.7rem 1.5rem;
}

/* ------------------------- NOTICIAS --------------------------------------- */
.noticias{                      /* Janela de exibição dos cards */
    display: flex;
    flex-direction: row;

    /* ESSENCIAL: Controla o scroll para mostrar 1 card por vez */
    scroll-snap-type: x mandatory;
    overflow-x: scroll;                 /* Permite o scroll horizontal */
    -webkit-overflow-scrolling: touch;  /* Melhora o scroll em iOS */

    /* Oculta a barra de rolagem */
    scrollbar-width: none;              /* Firefox */
   -ms-overflow-style: none;            /* IE and Edge */
}
.noticias::-webkit-scrollbar{
    display: none;                      /* Chrome, Safari, Opera */
}
.cardn{
    position: relative;                 /* Para as setas (dicas) de orientação */
    /* color: var(--corCZ90); */
    background-color: var(--corBL25);

                /* ESSENCIAL: Card ocupa a largura da "janela" com espaçamento */
    flex: 0 0 90%;                      /* largura definida */
    width: 100%;                        /* 32% p/ 3cards; 24% p/ 4cards */
    height: 20rem;

    overflow: hidden;                   /* evita vazamento de texto */
    border-radius: 1rem;
                /* Centraliza na "janela" e cria o espaçamento entre eles */
    scroll-snap-align: center;          /* Alinha no centro da viewport */
    margin-left: 5%;
}
.cardn:last-child{              /* Espaço do último card p/ não colar no final */
    margin-right: 5%;
}
.cardn p{
    padding-inline: 0.9rem;
}
.cardn h3{
    margin: 1rem auto;
    /* color: var(--corCZ80); */
}
.cardn .dica{                   /* Seta: indica mais cards para visualizar */
    position: absolute;         /* posição da seta dentro da caixa */
    bottom: 1rem;
    right: 1rem;
    font-size: 3rem;
    color: var(--corCZ100);
    opacity: 0.3;
    margin-bottom: 0;           /* resolve a posição da seta */
}

/* ------------------------- DATA ------------------------------------------- */
time{
    position: relative;         /* Para posicionar os pseudo-elementos */
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
                            /* Nova centralização horizontal e linhas */
    display: flex;              /* Mantém 'time' como um flex container */
    justify-content: center;    /* Centraliza na horizontal dentro da 'time' */
    align-items: center;        /* Centraliza na vertical dentro da 'time' */
    width: fit-content;         /* largura se ajusta ao conteúdo */
    
    padding: 0 1rem;            /* Adiciona espaçamento interno para as bordas */
    margin: 0 auto;        /* Centraliza 'time' na página */
}
time::before ,time::after{      /* pseudo-elementos p/ linhas horizontais */
    content: '';
    display: block;             /* Garante modo bloco */
    position: absolute;         /* Posição absoluta em relação ao 'time' */
    top: 50%;                   /* Posiciona no meio verticalmente */
    width: 2.2rem;              /* Largura da linha */
    height: 1px;                /* Espessura */
    background-color: var(--corCZ90);
    transform: translateY(-50%); /* Centraliza perfeitamente */
}
time::before{
   left: -1.7rem;           /* Ajusta a linha à esquerda da 'time' */
}
time::after{
    right: -1.8rem;         /* Ajusta a linha à direita da 'time' */
}

/* ------------------------- ACESSIBILIDADE --------------------------------- */
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}
        /* Traz o elemento de volta ao fluxo - fica visível ao focar */
.sr-only:focus{
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    outline: 1px solid blue;
    margin: 0;
}

/* ------------------------- CAIXA DE DESTAQUES ----------------------------- */
.cxdestaque{
    width: 90%;
    background-color: var(--corBL55);
    border: 1px solid var(--corBL25);
    padding-bottom: 0.5rem;     /* ajusta com o a:link abaixo */
    margin-inline: auto;        /* centraliza */
    margin-bottom: 2rem;        /* garante um espaço abaixo da caixa */
}
.cxdestaque h2{
    color: var(--corBL95);
    background-color: var(--corBL25);
    text-align: center;
    padding: 0.25rem 0 0.5rem 0;
    margin-top: 0;
    margin-bottom: 1rem;        /* afasta titulo do texto */
}
.cxdestaque p{
    text-align: justify;
}
.cxdestaque a:link{
    /* color: var(--corCZ90); */
    background-color: var(--corBL25);
    padding: 0.5rem 1rem;       /* deve ser o mesmo que padding da caixa */
    margin-inline-start: 1rem;
}
.cxdestaque a:link::after{
    content: " >";
    font-size: 1.4rem;
    background-color: var(--corBL25);
    margin-inline-start: 0.5rem;
}

/* ------------------------- JORNAL (colunas) ------------------------------- */
.jornal{
    margin-bottom: 3rem;
}
.jornal p.subtitulo{            /* subtitulo para h1 - linha inferior */
    column-span: all;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;

    margin-top: -1.3rem;
    margin-bottom: 1.5rem;
}
.jornal figure{
    width: 100%;                /* para encaixar na coluna do jornal */
    margin: 0 auto;             /* ajusta margem bottom dentro do jornal */
}

/* ------------------------- LISTA 1 ( Arte3d ) ----------------------------- */
ul.listaSimples{                /* lista sem enfeites */
    width: 100%;
    padding-left: 1.5rem;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}
ul.listaSimples li{
    color: var(--corCZ100);
    line-height: 1.5;
    list-style-type: none;
}

/* ------------------------- LISTA 2 ( Arte3d ) ----------------------------- */
ul.listaCol{                    /* lista para colunas (jornal) */
    padding-left: var(--espaco);/* define a indentação das li abaixo */
}
.listaCol li{
    color: var(--corCZ100);
    list-style-type: none;
    border: 1px solid var(--corBL25);
    border-left: 0.7rem solid var(--corBL95);
    padding: 0.25rem 1rem;
    margin-bottom: 0.5rem;
    margin-right: var(--espaco);
}
.listaCol .destaque{
    border-left: 0.7rem solid var(--corSL70);
}

/* ------------------------- LISTA 5 (estilizada) --------------------------- */
/*          fonte: https://codepen.io/iresheep/pen/dZrKpp                     */

.list-type5{
    width:18rem;
    margin:0 auto;
}
.list-type5 ol::before{         /* Arte3d */
    content:attr(aria-label);   /* Titulo para incluir */
    display: block;

    color: var(--corBL95);
    font-size:1.6rem;
    font-weight:bold;
    text-align: center;
    margin-bottom: 1rem;
}
.list-type5 ol{
    color: var(--corCZ100);
    list-style-type: none;
    counter-reset: li-counter;
    padding: 0;
    margin: 0;
    margin-left: 1em;
}
.list-type5 ol li{              /* campo de texto */
    position: relative;         /* para label numérico */
    background-color: var(--corBL25);
    margin-bottom: 1.5em;
    padding: 0.5em;
    padding-left: 3.5rem;       /* afastamento do texto */
}
.list-type5 a{
    font-family: 'Raleway', sans-serif;
    font-size:1rem;
    color:var(--corYL80);
    text-decoration:none;
}
.list-type5 li:hover{
    box-shadow:inset -0.8em 0 var(--corBL95);
    transition: box-shadow 0.5s;
}
.list-type5 ol li:before{       /* label numérico */
    position: absolute;
    z-index: 3;
    top: -0.3em;
    left: -0.5em;
    width: 3.0rem;              /* largura orig 1.8em */
    height: 2.36rem;            /* altura orig 1.2em */

    font-size: 1.8rem;          /* fonte orig 2em */
    line-height: 1.2;
    font-weight: bold;
    text-align: center;

    color: var(--corBL25);                /* números orig white */
    background-color: var(--corBL95);    /* cor label */
    filter: drop-shadow(3px 6px 3px var(--corCZ10));
    transform: rotate(-20deg);

    overflow: hidden;
    content: counter(li-counter);
    counter-increment: li-counter;
}
/* --- *** --------- *** --- FIM DO CELULAR --- *** ----------------- *** --- */

                            /* ---- * ---- */

        /* --- fone 600px _ tablet 1024px _ desktop 1440px --- */

/* ------------------------- TABLETS - (capa) ------------------------------- */
@media only screen and (min-width: 601px) and (max-width:895px) {

/* ------------------------- CAPA INTERMEDIÁRIA ----------------------------- */
.capaDir, .capaEsq{
    display: flex;
    border-top: 0.5rem solid var(--corBL85);
    border-bottom: 0.5rem solid var(--corBL85);
    height: 16rem;
}
.capaDir{
    box-shadow:inset -2rem 0 var(--corBL85);  /* borda lateral */
    background-color: var(--corBL25);
    padding-right: 2rem;
}
.capaEsq{
    flex-direction: row-reverse;
    background-color: var(--corBL35);
    box-shadow:inset 2rem 0 var(--corBL85);
    padding-left: 2rem;
}
.capaTexto{                     /* para titulo e texto em coluna */
    display: flex;
    flex-direction: column;
}
.capaTexto h2{
    margin: 0.5rem auto;
}
.capaDir img, .capaEsq img{     /* firefox */
    min-width: 15rem;
}
}


/* -------------- Media Queries para telas maiores -------------------------- */
@media only screen and (min-width: 810px) { /* obs. menu linha entra em 810px */

:root{
    --largPage: 1024px;
    --espaco: 2rem;             /* espaço lateral padding e margin */
    max-width: var(--largPage);
}
body{
    margin-top: 0;              /* IMP: inicia abaixo do cabeçalho */
}

/* ------------------------- TAGS GERAIS ------------------------------------ */

/* ------------------------- CITAÇÕES --- */
blockquote{
    padding-inline: 50% 5rem;   /* limita area da citação */
}
.citar{                         /* título e autor na citação de blockquote */
    padding-inline: 50% 5rem;
}

/* ------------------------- TAMANHO dos TITULOS - desktop --- */
h1{ font-size: 2rem; }          /* tam orig: 2.2 */
h2{ font-size: 1.7rem; }        /* tam orig: 1.5 */
h3{ font-size: 1.5rem; }        /* tam orig: 1.2 */
h4{ font-size: 1.2rem; }        /* tam orig: 1.0 */

/* ------------------------- IMAGENS --- */
figure{                         /* caixa de imagens - sempre na esquerda */
    float: left;
    margin: 0.3rem 1rem 1rem var(--espaco);
}
img.esquerda{   /* complemento */
    float: left;
    margin:0 1rem 1rem var(--espaco);
}
img.direita{    /* complemento */
    float: right;
    margin:0 2rem 1rem  1rem;
}
img.esquerda::after, img.direita::after, figure::after{    /* clearfix */
    content: '';
    clear: both;
}

/* ------------------------- TEXTOS --- */
p{
    padding-inline: var(--espaco);       /* move apenas elementos de texto */
}

/* ------------------------- CONTAINERS ------------------------------------- */
header.barra{                   /* bloco de fundo do cabeçalho de menu */
    position: relative;
    max-width: var(--largPage);
    margin: 0 auto;
}
p.sitename{                     /* sem o nome do site na barra */
    display: none;
}

/* ------------------------- RODAPÉ DE ARTIGO ------------------------------- */
footer.notaRodape::before{      /* fonte das referências */
    margin-left: 2rem;          /* ajusta a linha com a numeração */
}
footer.notaRodape{              /* footer para notas de rodapé */
    margin: 1.5rem 0 2rem 2rem;
}

/* ------------------------- RODAPÉ DO SITE --------------------------------- */
.caixa{
    min-width: 13.5rem;         /* max 4 caixas por linha - desktop */
}
.caixafull p{
    margin-bottom: 0.8rem;      /* respiro abaixo */
}
p.autor{
    font-size: 0.9rem;
}

/* ------------------------- FORMULARIO DE MSG ------------------------------ */
.msg-container input{
    width: 28.5rem;
}
.msg-container textarea{
    width: 32rem;
    height: 14rem;
}

/* ------------------------- FAQ -------------------------------------------- */
.faq2{
    width: 90%;
}
.faq2 dt{                       /* pergunta */
    position: relative;         /* garante posição para detalhe na linha */
    width: 60%;
    border-radius: 1rem;
    padding: 0.4rem 1.5rem;
    margin: 1rem 0 0 1rem;      /* só a margem esquerda */
}

.faq2 dt::after{                /* detalhe na linha da pergunta */
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 1rem;

    width: 1rem;
    height: 1rem;
    background-color: var(--corBL55);
    border-radius: 50%;
}
.faq2 dt:hover::after{          /* acende a 'lâmpada' ao passar o mouse */
    background-color: var(--corCZ100);
    filter: drop-shadow(1px 1px 4px var(--corCZ100));
}
.faq2 dd{                       /* resposta */
    margin: 0.8rem 1.5rem 1.7rem 2.5rem;
}

/* ------------------------- NOTICIAS --------------------------------------- */
.noticias{
    justify-content: space-evenly;
    gap:0.5rem;
    padding-inline: 0.5rem;     /* espaça no inicio e fim */
}
.cardn{                         /* larguras definidas pelo número de cards */
    flex: 1;
    margin-bottom: 0;           /* diminui mas não elimina */
    margin-left: unset;         /* limpa a margem */
}
.cardn:last-child{
    margin-right: 0;
}
.cardn:hover{
    border: 1px solid var(--corBL85);
    filter: drop-shadow(2px 2px 3px var(--corSL75));
}
.cardn .dica{
    display: none;
}

/* ------------------------- CAIXA DE DESTAQUES ----------------------------- */
.cxdestaque{
    width: 70%;
}
.cxdestaque h2{
    margin-bottom: 2rem;        /* afasta titulo do texto */
}
.cxdestaque a:link{
    margin-inline-start: 2rem;
}

/* ------------------------- JORNAL (colunas) ------------------------------- */
.jornal{                        /* classe multi colunas */
    column-count: 3;
    column-rule: 1px solid var(--corBL85);
    column-gap: 1rem;           /* padrão: 1rem */
    padding-inline: 1rem;       /* ajusta o alinhamento junto com 'jornal p' */
    margin-top: 2rem;           /* espaço para folga do bloco de colunas */

        /* fundo escuro */
    background-color: hsl(210, 15%, 40%);
    padding-top: 1rem;
    padding-bottom: 2rem;
    width: 98%;
    margin: 0 auto;
    border: 1px solid hsl(210, 15%, 30%);
    border-radius: 1rem;
}
.jornal h1{                     /* titulo meio página */
    column-span: all;
    width: 80%;
    border-bottom:1px solid var(--corBL95);
    border-top:1px solid var(--corBL95);
    padding-bottom:5px;
    margin: 1.5rem auto;
}
.jornal h2{                     /* titulo coluna */
    font-size: 1.5rem;          /* volta padrão normal */
    margin: 0.5rem 0;
}
.jornal p{                      /* nivela a primeira linha das colunas */
    margin-top: 0;
    padding-inline: 1rem;       /* ajusta alinhamento e espaço entre colunas */
}
.jornal hr{                     /* linha menor que o padrão */
    width: 60%;
    column-span: all;
}
.jornal figure{
    break-inside: avoid;        /* evita quebra do título para outra coluna */
    margin-bottom: 1rem;
}

/* ------------------------- LISTA 2 ( Arte3d ) ----------------------------- */
 ul.listaCol{
    padding-left: 1rem;         /* define a indentação das li abaixo */
}
.listaCol li{
    margin-right:1rem;
}
.listaCol li:hover{
    box-shadow:inset -0.7rem 0 var(--corBL95);    /*orig #6CD6CC */
    transition: box-shadow 0.5s;
}

/* ------------------------- LISTA 5 (estilizada) --------------------------- */
.list-type5{
    width: 50%;
}
}


/* ------------------------- DESKTOP - (capa) ------------------------------- */
/* -------------- Media Queries para telas maiores -------------------------- */
@media only screen and (min-width: 896px) {    /* Mínimo para a capa completa */

/* ------------------------- CAPA DO SITE ----------------------------------- */
.capaDir,.capaEsq{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 15rem;
    border-top: 0.5rem solid var(--corBL85);
    border-bottom: 0.5rem solid var(--corBL85);
}
.capaDir{
    box-shadow:inset -3rem 0 var(--corBL85);  /* borda lateral */
    background-color: var(--corBL25);
    padding-right: 4rem;
}
.capaTexto{                     /* remove coluna do modo capa intermediaria */
    display: flex;
}
.capaEsq{
    flex-direction: row-reverse;    /* inverte titulo - parágrafo */
    box-shadow:inset 3rem 0 var(--corBL85);   /* borda lateral */
    padding-left: 4rem;
}
.capaEsq .capaTexto{            /* passo extra por conta capa intermediaria */
    flex-direction: row-reverse;
}
.capa h2{
    color: var(--corYL80);
    width: 13rem;
    border-radius: 3rem;
    padding-top: 7rem;
    transition: box-shadow 2s ease, color 1s ease; /* retorno :hover lento */
}
.capa h2:hover{
    box-shadow: 1px 0 12px var(--corCZ100) ;
    color: var(--corBL95);
    transition: box-shadow 0.5s; /* inicia transição rápida */
}
.capaDir h2{
    background-color: var(--corBL35);
    text-align: left;
    padding-left: 2rem;
    margin: 1rem 0.5rem 1rem 1rem;
}
.capaEsq h2{
    background-color: var(--corSL35);
    text-align: right;
    padding-right: 2rem;
    margin: 1rem 1rem 1rem 0;
}
.capa p{
    flex: 2;
    color: var(--corCZ00);
    text-align: center;
    padding-top: 1rem;
    margin: auto 0;
}
.capaDir p{
    background-color: var(--corYL80);
    padding-left: 1rem;
    margin: 1rem 0 1rem 0.5rem;
}
.capaEsq p{
    background-color: var(--corGR70);
    padding-right: 1rem;
    margin: 1rem 1rem 1rem 0;
}
.capa img{
    align-self: center;
    width: auto;
    height: 100%;
    padding: 0 auto;
    margin: 0 auto;
}
.capaDir img{
   transform: translateX(1rem);
}
.capaEsq img{
   transform: translateX(-1rem);
}
.capa a:link{
    color: var(--corCZ00);
    font-weight: bold;
}
.capa a:link:hover{
    color: var(--corSL70);
}
}