/* ============================================================
   Layout de leitura — paginas de conteudo
   Mesma linguagem da pagina Equipe: largura inteira, tipo maior,
   respiro entre blocos e imagem em faixa quebrando o texto.

   O ganho de "leveza" com muito texto vem de tres coisas:
   1. medida de linha curta (~72 caracteres) mesmo em tela larga
   2. entrelinha alta (1.75)
   3. espaco generoso antes de cada subtitulo
   ============================================================ */

.leitura {
    float: left;
    width: 100%;
    margin-top: 70px;
    margin-bottom: 130px;
}

/* coluna de leitura: nao deixa a linha passar de ~72 caracteres */
.leitura .medida {
    max-width: 720px;
}

.leitura h1 {
    color: #1f275b;
    font-family: 'merriweatherregular';
    font-size: 38px;
    line-height: 1.2;
    margin: 0;
}

/* fio fino sob o titulo, mesmo tom da grade da pagina Equipe */
.leitura .fio {
    border: 0;
    border-top: 1px solid #d8dae5;
    margin: 26px 0 42px 0;
}

.leitura h2 {
    color: #1f275b;
    font-family: 'merriweatherregular';
    font-size: 21px;
    line-height: 1.45;
    margin: 48px 0 14px 0;
}

.leitura h2:first-of-type {
    margin-top: 0;
}

.leitura p {
    font-family: arial;
    font-size: 17px;
    line-height: 1.75;
    color: #3d4152;
    margin: 0 0 18px 0;
}

.leitura p:last-child {
    margin-bottom: 0;
}

/* lista de areas de atuacao — duas colunas em tela larga */
.leitura .lista-areas {
    list-style: none;
    padding: 0;
    margin: 0;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 50px;
    column-gap: 50px;
}

.leitura .lista-areas li {
    font-family: arial;
    font-size: 16px;
    line-height: 1.55;
    color: #3d4152;
    padding: 11px 0 11px 16px;
    border-bottom: 1px solid #e6e8f0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    position: relative;
}

.leitura .lista-areas li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 5px;
    height: 5px;
    background: #9aa0b4;
}

/* faixa de imagem quebrando o texto, largura inteira.

   520px em 1440 de largura da ~2.8:1. A faixa antiga (340px) dava 4.2:1
   e so funcionava na foto da placa, que e um close frontal centralizado.
   Nas fotos de ambiente ela decepava o assunto.

   Como a faixa e sempre mais "deitada" que as fotos (todas ~1.5:1),
   o corte acontece so na vertical — por isso o ajuste fino e o
   segundo valor do object-position, definido por foto abaixo. */
.leitura-faixa {
    float: left;
    width: 100%;
    margin: 60px 0;
}

.leitura-faixa img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center center;
}

/* recepcao: a placa do escritorio fica no alto, na parede da esquerda.
   Puxa o corte pra cima para nao decapitar a placa — e de quebra tira
   do enquadramento a sinalizacao de incendio da porta ao lado. */
.leitura-faixa.foco-alto img {
    object-position: center 15%;
}

/* sala de reuniao: mesa e TV ficam na metade de cima */
.leitura-faixa.foco-meio img {
    object-position: center 40%;
}

/* mesa em perspectiva: o bloco de anotacoes em foco esta la embaixo */
.leitura-faixa.foco-baixo img {
    object-position: center 72%;
}

@media (max-width: 767px) {
    .leitura {
        margin-top: 45px;
        margin-bottom: 80px;
    }
    .leitura h1 { font-size: 30px; }
    .leitura .fio { margin: 20px 0 30px 0; }
    .leitura h2 { font-size: 19px; margin-top: 36px; }
    .leitura p { font-size: 16px; line-height: 1.7; }
    .leitura .lista-areas {
        -webkit-column-count: 1;
        column-count: 1;
    }
    .leitura-faixa { margin: 40px 0; }
    .leitura-faixa img { height: 250px; }
}