/* =========================================
   OITO DE BILHAR
   WINDOWS 8 / FRUTIGER AERO / WEB 2.0
========================================= */


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Segoe UI",
        "Segoe UI Light",
        Tahoma,
        Arial,
        sans-serif;

    color: #273a32;

    background:

        radial-gradient(
            circle at 15% 12%,
            rgba(255,255,255,.95),
            transparent 25%
        ),

        radial-gradient(
            circle at 87% 15%,
            rgba(255,255,255,.8),
            transparent 22%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(255,255,255,.3),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #8ed8ef 0%,
            #c8eff3 42%,
            #dff3d1 61%,
            #a6d77c 100%
        );

    background-attachment: fixed;

}


/* =========================================
   PEQUENAS BOLHAS DECORATIVAS
========================================= */

body::before {

    content: "";

    position: fixed;

    width: 240px;
    height: 240px;

    top: 5%;
    right: 3%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.9),
            rgba(255,255,255,.2) 35%,
            transparent 68%
        );

    pointer-events: none;

    opacity: .45;

}


body::after {

    content: "";

    position: fixed;

    width: 160px;
    height: 160px;

    left: 4%;
    bottom: 5%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.8),
            transparent 65%
        );

    pointer-events: none;

    opacity: .4;

}


/* =========================================
   JANELA
========================================= */

.page {

    width: min(1180px, 94vw);

    margin: 28px auto;

    overflow: hidden;

    border:

        1px solid
        rgba(73,110,91,.7);

    border-radius:
        20px
        20px
        8px
        8px;

    background:

        rgba(
            239,
            249,
            237,
            .78
        );

    box-shadow:

        0 2px 0
        rgba(255,255,255,.9),

        0 12px 35px
        rgba(40,90,55,.3),

        0 30px 60px
        rgba(30,80,60,.15);

    backdrop-filter:
        blur(12px);

}


/* =========================================
   CABEÇALHO
========================================= */

.header {

    min-height: 112px;

    padding:
        18px
        24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(85,120,88,.65);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(245,252,240,.88) 45%,
            rgba(198,228,183,.85) 100%
        );

    box-shadow:

        inset
        0 1px
        rgba(255,255,255,1),

        inset
        0 -5px
        15px
        rgba(91,131,76,.12);

}


/* =========================================
   LOGO
========================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 17px;

}


.logo-placeholder {

    width: 67px;
    height: 67px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    border:
        1px solid
        #718b72;

    background:

        radial-gradient(
            circle at 30% 22%,
            #737d76,
            #252c27 23%,
            #090d0b 70%
        );

    color: white;

    font-size: 28px;

    font-weight: 600;

    box-shadow:

        inset
        5px
        5px
        10px
        rgba(255,255,255,.08),

        0 4px 7px
        rgba(0,0,0,.25);

}


.brand-text h1 {

    margin: 0;

    color: #31523d;

    font-size: 31px;

    font-weight: 300;

    letter-spacing: -.8px;

    text-shadow:
        0 1px white;

}


.brand-text p {

    margin: 5px 0 0;

    color: #66806b;

    font-size: 12px;

}


.header-right {

    text-align: right;

    color: #66806b;

}


.online {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 6px;

    margin-bottom: 5px;

    color: #43864b;

    font-size: 11px;

}


.online span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #67c86c;

    border: 1px solid #438947;

    box-shadow:
        0 0 6px #79dc79;

}


.date {

    font-size: 9px;

}


/* =========================================
   CORPO
========================================= */

.body {

    display: grid;

    grid-template-columns:
        210px
        minmax(0, 1fr);

}


/* =========================================
   SIDEBAR
========================================= */

.sidebar {

    padding: 14px;

    border-right:
        1px solid
        rgba(99,128,92,.55);

    background:

        linear-gradient(
            180deg,
            rgba(226,241,219,.84),
            rgba(202,224,190,.68)
        );

}


/* =========================================
   TÍTULO DO MENU
========================================= */

.menu-title {

    height: 30px;

    display: flex;

    align-items: center;

    padding: 0 10px;

    margin-bottom: 5px;

    border:
        1px solid
        #80947c;

    border-radius:
        8px
        8px
        3px
        3px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #e9f1e5 48%,
            #c4d4bd 52%,
            #e6eee1
        );

    color: #4a604d;

    font-size: 10px;

    font-weight: 600;

    text-shadow:
        0 1px white;

    box-shadow:

        inset
        0 1px
        white,

        0 1px 2px
        rgba(60,90,55,.2);

}


.menu-title.second {

    margin-top: 14px;

}


/* =========================================
   BOTÕES
========================================= */

.nav-button {

    position: relative;

    min-height: 38px;

    margin-bottom: 4px;

    padding: 6px 9px;

    display: flex;

    align-items: center;

    gap: 9px;

    border:
        1px solid
        rgba(116,143,108,.85);

    border-radius:
        7px
        7px
        3px
        3px;

    color: #3f5444;

    text-decoration: none;

    font-size: 11px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(247,250,244,.88) 42%,
            rgba(211,229,204,.88) 52%,
            rgba(231,240,226,.9)
        );

    box-shadow:

        inset
        0 1px
        rgba(255,255,255,1),

        0 1px 2px
        rgba(60,90,55,.16);

    text-shadow:
        0 1px white;

    transition:
        transform .12s,
        filter .12s;

}


.nav-button:hover {

    transform:
        translateX(2px);

    filter:
        brightness(1.04);

}


.nav-button:active {

    transform:
        translateY(1px);

}


.nav-button.selected {

    color: white;

    border-color:
        #4f9a50;

    background:

        linear-gradient(
            180deg,
            #bdecae,
            #80d16d 45%,
            #55ae50 52%,
            #7bc96d
        );

    text-shadow:
        0 1px 2px #39743c;

}


/* =========================================
   ÍCONES
========================================= */

.nav-icon {

    width: 21px;
    height: 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        #9aaf94;

    border-radius: 5px;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #dcebd7
        );

    color: #52835a;

    font-size: 12px;

    box-shadow:
        inset
        0 1px
        white;

}


.selected .nav-icon {

    color: #438249;

}


/* =========================================
   FOTO LATERAL
========================================= */

.side-photo {

    margin-top: 20px;

    padding: 7px;

    text-align: center;

    border:
        1px solid
        #9eaf97;

    border-radius: 10px;

    background:
        rgba(255,255,255,.5);

}


.photo-placeholder {

    height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px dashed
        #8da187;

    border-radius: 7px;

    background:

        linear-gradient(
            135deg,
            #d9ead3,
            #eff8ea
        );

    color: #799172;

    font-size: 9px;

}


.side-photo small {

    display: block;

    margin-top: 6px;

    color: #70836b;

    font-size: 8px;

}


/* =========================================
   CONTEÚDO
========================================= */

.main {

    min-width: 0;

    padding:
        15px
        17px
        25px;

}


/* =========================================
   CABEÇALHO DA PÁGINA
========================================= */

.page-heading {

    min-height: 41px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        6px
        13px;

    margin-bottom: 14px;

    border:
        1px solid
        #899b84;

    border-radius:
        8px
        8px
        3px
        3px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #e9f1e5 48%,
            #ccd9c7 52%,
            #e8efe5
        );

    box-shadow:

        inset
        0 1px
        white,

        0 2px 4px
        rgba(55,85,50,.14);

}


.tiny {

    display: block;

    color: #80917a;

    font-size: 7px;

    letter-spacing: 2px;

}


.page-heading h2 {

    margin: 1px 0 0;

    color: #425745;

    font-size: 17px;

    font-weight: 300;

}


.page-number {

    color: #7c8e76;

    font-size: 9px;

}


/* =========================================
   GLASS
========================================= */

.glass {

    border:
        1px solid
        rgba(112,139,104,.65);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.84),
            rgba(244,251,241,.63)
        );

    box-shadow:

        inset
        0 1px
        rgba(255,255,255,.95),

        0 3px 7px
        rgba(55,90,55,.12);

    backdrop-filter:
        blur(8px);

}


/* =========================================
   HERO
========================================= */

.hero {

    min-height: 235px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    gap: 15px;

    padding:
        28px;

    margin-bottom: 12px;

    overflow: hidden;

    position: relative;

    border-radius:
        12px
        12px
        5px
        5px;

    background:

        radial-gradient(
            circle at 90% 40%,
            rgba(163,220,132,.5),
            transparent 31%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(222,242,216,.7)
        );

}


.hero::after {

    content: "";

    position: absolute;

    top: 0;
    left: 4%;

    width: 92%;
    height: 42px;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.75),
            transparent
        );

    pointer-events: none;

}


.hero-text {

    position: relative;

    z-index: 1;

}


.eyebrow {

    color: #6d9565;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.hero h2 {

    margin: 9px 0;

    color: #31573b;

    font-size: 29px;

    font-weight: 300;

}


.hero p {

    max-width: 510px;

    margin: 7px 0;

    color: #536656;

    font-size: 12px;

    line-height: 1.65;

}


.hero strong {

    color: #3e8147;

}


/* =========================================
   BOTÃO AERO
========================================= */

.aero-button {

    margin-top: 11px;

    padding:
        8px
        16px;

    border:
        1px solid
        #55944f;

    border-radius:
        8px
        8px
        3px
        3px;

    color: white;

    font-family:
        "Segoe UI",
        sans-serif;

    font-size: 10px;

    cursor: pointer;

    background:

        linear-gradient(
            180deg,
            #c9f5b8,
            #83d66e 44%,
            #53ae4c 53%,
            #7dce6e
        );

    box-shadow:

        inset
        0 1px
        rgba(255,255,255,.85),

        0 2px 4px
        rgba(50,100,50,.25);

    text-shadow:
        0 1px 2px #39753a;

}


.aero-button:hover {

    filter:
        brightness(1.06);

}


/* =========================================
   ESPAÇO DA IMAGEM HERO
========================================= */

.hero-image {

    min-height: 175px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px dashed
        #8da787;

    border-radius:
        14px
        14px
        5px
        5px;

    background:

        linear-gradient(
            145deg,
            rgba(215,240,206,.8),
            rgba(242,250,238,.7)
        );

    color: #80987a;

    font-size: 8px;

    position: relative;

    overflow: hidden;

}


.hero-image::before {

    content: "";

    position: absolute;

    top: -30px;

    width: 90%;

    height: 70px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.55);

}


.image-symbol {

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 31% 22%,
            #68716b,
            #202722 25%,
            #070b08 70%
        );

    color: white;

    font-size: 25px;

    box-shadow:
        0 5px 9px rgba(0,0,0,.22);

}


/* =========================================
   FAIXA DE IMAGENS
========================================= */

.image-strip {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 9px;

    margin-bottom: 15px;

}


.image-card {

    padding: 6px;

    border:
        1px solid
        #9bab94;

    border-radius:
        9px
        9px
        4px
        4px;

    background:
        rgba(255,255,255,.62);

    box-shadow:
        inset 0 1px white,
        0 2px 4px rgba(55,85,50,.1);

}


.stock-placeholder {

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    background:

        linear-gradient(
            135deg,
            #c9e9bc,
            #edf7e9
        );

    color: #809779;

    font-size: 9px;

}


.image-card span {

    display: block;

    padding:
        5px
        3px
        2px;

    color: #657762;

    font-size: 8px;

}


/* =========================================
   COLUNAS
========================================= */

.columns {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        190px;

    gap: 14px;

}


/* =========================================
   BOX
========================================= */

.box {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius:
        10px
        10px
        4px
        4px;

}


.box-title {

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        0
        12px;

    border-bottom:
        1px solid
        #a8b9a1;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #e8f0e5 47%,
            #ccd9c7 53%,
            #e9f1e6
        );

    color: #62755e;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .5px;

    text-shadow:
        0 1px white;

}


/* =========================================
   CONTEÚDO DO BOX
========================================= */

.box-content {

    padding:
        15px
        17px;

}


.box-content small {

    color: #84927e;

    font-size: 8px;

}


.box-content h3 {

    margin:
        6px
        0;

    color: #3f5743;

    font-size: 14px;

    font-weight: 400;

}


.box-content p {

    margin:
        0
        0
        9px;

    color: #5c6d5a;

    font-size: 10px;

    line-height: 1.6;

}


.box-content a,
.profile a {

    color: #3e8147;

    text-decoration: none;

    font-size: 9px;

}


.box-content a:hover,
.profile a:hover {

    text-decoration: underline;

}


/* =========================================
   ARQUIVOS
========================================= */

.files {

    padding: 5px;

}


.files a {

    min-height: 50px;

    padding:
        6px
        8px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #445945;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(150,170,143,.3);

}


.files a:last-child {

    border-bottom: none;

}


.files a:hover {

    background:
        rgba(220,240,214,.5);

}


.file-symbol {

    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        #9aac94;

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            white,
            #d8e8d2
        );

    color: #548358;

}


.files strong {

    display: block;

    font-size: 10px;

    font-weight: 400;

}


.files small {

    display: block;

    margin-top: 2px;

    color: #82907d;

    font-size: 8px;

}


.files b {

    margin-left: auto;

    color: #789170;

    font-size: 12px;

}


/* =========================================
   PERFIL
========================================= */

.profile {

    padding-bottom: 12px;

    margin-bottom: 12px;

    overflow: hidden;

    border-radius:
        10px
        10px
        4px
        4px;

}


.profile-photo {

    height: 125px;

    margin:
        9px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px dashed
        #91a58a;

    border-radius: 8px;

    background:

        linear-gradient(
            135deg,
            #d3e9cb,
            #f1f8ee
        );

    color: #82977d;

    font-size: 8px;

}


.profile p {

    padding:
        0
        10px;

    margin:
        8px 0;

    color: #60705e;

    font-size: 9px;

    line-height: 1.5;

}


.profile a {

    display: block;

    padding:
        0
        10px;

}


/* =========================================
   WIDGET
========================================= */

.widget {

    padding-bottom: 11px;

    margin-bottom: 12px;

    overflow: hidden;

    border-radius:
        10px
        10px
        4px
        4px;

}


.counter {

    margin:
        10px;

    padding:
        8px;

    text-align: center;

    border:
        1px solid
        #9eaf98;

    border-radius: 5px;

    background:
        rgba(255,255,255,.65);

    color: #49604a;

    font-family:
        "Segoe UI",
        sans-serif;

    font-size: 17px;

    letter-spacing: 3px;

}


.widget > small {

    display: block;

    padding:
        0
        10px;

    color: #82907d;

    font-size: 8px;

}


/* =========================================
   STATUS
========================================= */

.status {

    margin:
        10px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #4a8750;

    font-size: 9px;

}


.status span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #69c86a;

    border:
        1px solid
        #438647;

    box-shadow:
        0 0 6px #7bdd78;

}


/* =========================================
   CONSTRUÇÃO
========================================= */

.construction {

    padding:
        11px;

    text-align: center;

    border-top:
        1px dotted
        #a9baa4;

    color: #7e9179;

    font-size: 8px;

}


.construction span {

    margin:
        0
        8px;

    color: #8cb679;

}


/* =========================================
   FOOTER
========================================= */

footer {

    min-height: 45px;

    padding:
        0
        18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid
        rgba(102,130,94,.55);

    background:

        linear-gradient(
            180deg,
            rgba(237,245,233,.9),
            rgba(204,222,198,.8)
        );

    color: #71816c;

    font-size: 8px;

    text-shadow:
        0 1px white;

}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 850px) {

    .body {

        grid-template-columns:
            175px
            minmax(0, 1fr);

    }


    .hero {

        grid-template-columns:
            1fr;

    }


    .hero-image {

        display: none;

    }


    .columns {

        grid-template-columns:
            1fr;

    }


    .right {

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 10px;

    }

}


@media (max-width: 650px) {

    .page {

        width: 97vw;

        margin: 8px auto;

        border-radius:
            12px
            12px
            5px
            5px;

    }


    .header {

        padding: 13px;

    }


    .logo-placeholder {

        width: 50px;
        height: 50px;

        border-radius: 12px;

    }


    .brand-text h1 {

        font-size: 22px;

    }


    .brand-text p {

        font-size: 9px;

    }


    .header-right {

        display: none;

    }


    .body {

        display: block;

    }


    .sidebar {

        border-right: none;

        border-bottom:
            1px solid
            rgba(99,128,92,.55);

    }


    .nav-button {

        display: inline-flex;

        width:
            calc(50% - 3px);

    }


    .side-photo {

        display: none;

    }


    .main {

        padding:
            10px;

    }


    .image-strip {

        grid-template-columns:
            1fr
            1fr
            1fr;

    }


    .right {

        display: block;

    }


    footer {

        flex-direction: column;

        gap: 5px;

        padding: 10px;

    }

}

/* =========================================
   NOTÍCIAS
========================================= */


.news-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin:
        3px
        0
        12px;

}


.filter {

    padding:
        6px
        11px;

    border:
        1px solid
        #96a991;

    border-radius:
        7px
        7px
        3px
        3px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #e8f0e4 48%,
            #ccd9c7 52%,
            #e6eee2
        );

    color:
        #62735f;

    font-family:
        "Segoe UI",
        sans-serif;

    font-size:
        8px;

    cursor:
        pointer;

    box-shadow:

        inset
        0 1px
        white,

        0 1px 2px
        rgba(50,80,50,.12);

}


.filter.active {

    color:
        white;

    border-color:
        #57934e;

    background:

        linear-gradient(
            180deg,
            #bdebb1,
            #83d36f 47%,
            #58ad50 53%,
            #78c96b
        );

    text-shadow:
        0 1px 2px #477a42;

}


/* =========================================
   NOTÍCIA PRINCIPAL
========================================= */


.news-feature {

    display:
        grid;

    grid-template-columns:
        230px
        minmax(0,1fr);

    min-height:
        190px;

    margin-bottom:
        12px;

    overflow:
        hidden;

    border-radius:
        11px
        11px
        4px
        4px;

}


.news-image {

    min-height:
        190px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-right:
        1px solid
        rgba(130,155,120,.5);

    background:

        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.9),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #c5e8ba,
            #eaf6e5
        );

    color:
        #789173;

    font-size:
        9px;

}


.news-feature-content {

    padding:
        20px;

}


.news-meta {

    color:
        #7d9578;

    font-size:
        7px;

    letter-spacing:
        1.2px;

}


.news-feature h2 {

    margin:
        8px
        0;

    color:
        #3d5741;

    font-size:
        19px;

    font-weight:
        300;

    line-height:
        1.25;

}


.news-feature p {

    margin:
        8px
        0
        12px;

    color:
        #61715f;

    font-size:
        10px;

    line-height:
        1.6;

}


.news-feature a,
.news-card a {

    color:
        #438249;

    text-decoration:
        none;

    font-size:
        9px;

}


.news-feature a:hover,
.news-card a:hover {

    text-decoration:
        underline;

}


/* =========================================
   LISTA
========================================= */


.news-list {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;

}


.news-card {

    display:
        grid;

    grid-template-columns:
        92px
        1fr;

    min-height:
        125px;

    overflow:
        hidden;

    border-radius:
        9px
        9px
        4px
        4px;

}


.mini-news-image {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-right:
        1px solid
        rgba(130,155,120,.5);

    background:

        linear-gradient(
            145deg,
            #c8e7bf,
            #eef7eb
        );

    color:
        #82977d;

    font-size:
        8px;

}

/* =========================================
   TAMANHO DAS CAPAS DAS NOTÍCIAS
========================================= */

.news-image {
    width: 230px;
    height: 190px;

    min-height: 190px;
    max-height: 190px;

    overflow: hidden;
}

.news-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================
   CAPAS DAS NOTÍCIAS MENORES
========================================= */

.mini-news-image {
    width: 92px;
    height: 125px;

    min-height: 125px;
    max-height: 125px;

    overflow: hidden;
}

.mini-news-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .news-image {
        width: 100%;
        height: 130px;

        min-height: 130px;
        max-height: 130px;
    }

    .news-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

}


.news-card-text {

    padding:
        12px;

}


.news-card h3 {

    margin:
        5px
        0;

    color:
        #465d48;

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.35;

}


.news-card p {

    margin:
        5px
        0
        7px;

    color:
        #71806e;

    font-size:
        8px;

    line-height:
        1.5;

}


/* =========================================
   NOTA DO ARQUIVO
========================================= */


.archive-note {

    margin-top:
        13px;

    overflow:
        hidden;

    border-radius:
        10px
        10px
        4px
        4px;

}


.archive-note-content {

    padding:
        13px
        16px;

}


.archive-note-content p {

    margin:
        4px
        0;

    color:
        #637261;

    font-size:
        9px;

    line-height:
        1.6;

}


.signature {

    display:
        block;

    margin-top:
        10px;

    color:
        #82917d;

    font-size:
        8px;

    text-align:
        right;

}


/* =========================================
   RESPONSIVO
========================================= */


@media (max-width: 700px) {

    .news-feature {

        grid-template-columns:
            1fr;

    }


    .news-image {

        min-height:
            130px;

        border-right:
            none;

        border-bottom:
            1px solid
            rgba(130,155,120,.5);

    }


    .news-list {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   PÁGINA INDIVIDUAL DA NOTÍCIA
========================================================= */

.entry-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    color: #82927e;
    font-size: 8px;
}

.entry-breadcrumb a {
    color: #56835a;
    text-decoration: none;
}

.entry-breadcrumb a:hover {
    text-decoration: underline;
}


/* DOCUMENTO */

.entry {
    width: 100%;
    overflow: hidden;

    border:
        1px solid
        rgba(112,139,104,.65);

    border-radius:
        12px
        12px
        5px
        5px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.88),
            rgba(239,248,235,.72)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.95),
        0 4px 12px rgba(55,90,55,.12);

    backdrop-filter: blur(8px);
}


/* CABEÇALHO */

.entry-header {
    padding:
        27px
        30px
        22px;

    border-bottom:
        1px solid
        rgba(130,155,120,.32);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82),
            rgba(225,240,220,.5)
        );
}

.entry-number {
    display: block;

    margin-bottom: 9px;

    color: #94a390;

    font-size: 7px;

    letter-spacing: 1.6px;
}

.entry-header .news-meta {
    display: block;

    margin-bottom: 7px;

    color: #789174;

    font-size: 7px;

    letter-spacing: 1px;
}

.entry-header h1 {
    max-width: 760px;

    margin:
        8px
        0
        10px;

    color: #405844;

    font-size: 30px;

    font-weight: 300;

    line-height: 1.2;
}

.entry-subtitle {
    max-width: 680px;

    margin: 0;

    color: #71806e;

    font-size: 10px;

    line-height: 1.7;
}


/* IMAGEM */

.entry-image {
    width: calc(100% - 56px);

    min-height: 270px;

    margin:
        20px
        28px
        0;

    overflow: hidden;

    border:
        1px solid
        rgba(125,150,115,.45);

    border-radius:
        10px
        10px
        4px
        4px;

    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(255,255,255,.95),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #c9e5c1,
            #eef6ea
        );
}

.entry-image img {
    display: block;

    width: 100%;

    min-height: 270px;

    object-fit: cover;
}

.entry-image-placeholder {
    min-height: 270px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #7d9678;

    font-size: 30px;
}

.entry-image-placeholder span {
    font-size: 8px;
    letter-spacing: 1.3px;
}


/* =========================================================
   TEXTO
========================================================= */

.entry-text {
    max-width: 760px;

    margin:
        30px
        auto;

    padding:
        0
        35px;

    color: #596b58;

    font-size: 11px;

    line-height: 1.95;
}

.entry-text p {
    margin:
        0
        0
        19px;
}

.entry-text {
    max-width: 760px;

    margin:
        30px
        0
        30px
        28px;

    padding:
        0
        35px;

    color: #596b58;

    font-size: 11px;

    line-height: 1.95;
}

    color: #4d674e;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.3;
}

.entry-text h3 {
    margin:
        28px
        0
        11px;

    color: #587058;

    font-size: 13px;

    font-weight: 400;
}

.entry-text a {
    color: #4f8755;
    text-decoration: underline;
}

.entry-text a:hover {
    color: #315f37;
}


/* CITAÇÃO */

.entry-text blockquote {
    margin:
        28px
        0;

    padding:
        15px
        21px;

    border-left:
        3px solid
        #94bd8c;

    border-radius: 4px;

    background:
        rgba(220,235,215,.48);

    color:
        #6d806b;

    font-style: italic;

    line-height: 1.8;
}


/* LINHA */

.entry-text hr {
    margin:
        30px
        0;

    border: none;

    border-top:
        1px solid
        rgba(130,155,120,.28);
}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.entry-info {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    width: 100%;

    margin-top: 30px;

    border-top:
        1px solid
        rgba(130,155,120,.3);

    background:
        rgba(225,237,221,.35);
}

.entry-info div {
    min-height: 65px;

    padding:
        14px
        20px;

    border-right:
        1px solid
        rgba(130,155,120,.28);
}

.entry-info div:last-child {
    border-right: none;
}

.entry-info span {
    display: block;

    margin-bottom: 6px;

    color: #91a08d;

    font-size: 6px;

    letter-spacing: 1.2px;
}

.entry-info strong {
    color: #5c7059;

    font-size: 8px;

    font-weight: 400;
}


/* =========================================================
   NAVEGAÇÃO
========================================================= */

.entry-navigation {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 12px;

    margin-top: 14px;
}

.entry-navigation a {
    color: #608060;

    font-size: 8px;

    text-decoration: none;
}

.entry-navigation a:hover {
    text-decoration: underline;
}

.entry-nav:last-child {
    text-align: right;
}

.entry-nav.disabled {
    opacity: .35;

    pointer-events: none;
}

.entry-back {
    padding:
        7px
        13px;

    border:
        1px solid
        #a7bba2;

    border-radius:
        7px
        7px
        3px
        3px;

    background:
        rgba(245,250,242,.7);
}


/* =========================================================
   NOTA FINAL
========================================================= */

.entry-footer-note {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 14px;

    padding: 12px;

    border:
        1px solid
        rgba(130,155,120,.3);

    border-radius:
        8px
        8px
        3px
        3px;

    background:
        rgba(245,250,242,.6);

    color: #899a85;

    font-size: 7px;

    letter-spacing: .5px;
}


/* =========================================================
   RESPONSIVO DA ENTRADA
========================================================= */

@media (max-width: 700px) {

    .entry-image {
        width: calc(100% - 36px);

        height: 190px;
        min-height: 0;

        margin:
            15px
            18px
            0;
    }


    .entry-image img {
        width: 100%;
        height: 100%;

        min-height: 0;
        max-height: 100%;

        object-fit: cover;
    }


    .entry-image-placeholder {
        height: 190px;
        min-height: 0;
    }


    .entry-text {
        margin:
            24px
            auto;

        padding:
            0
            20px;

        font-size:
            10px;
    }


    .entry-info {
        grid-template-columns:
            1fr;
    }


    .entry-info div {
        border-right:
            none;

        border-bottom:
            1px solid
            rgba(130,155,120,.28);
    }


    .entry-info div:last-child {
        border-bottom:
            none;
    }


    .entry-navigation {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        text-align:
            center;
    }


    .entry-nav:last-child {
        text-align:
            center;
    }

}

/* =========================================================
   ARQUIVOS
========================================================= */


/* =========================================================
   CABEÇALHO
========================================================= */

.archive-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 18px;

    padding:
        25px
        28px
        23px;

    border:
        1px solid
        rgba(120,145,112,.42);

    border-radius:
        12px
        12px
        5px
        5px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(225,240,220,.48)
        );

    box-shadow:
        inset
        0 1px
        rgba(255,255,255,.9);

}


.archive-label {

    display: block;

    margin-bottom: 7px;

    color:
        #91a08d;

    font-size:
        7px;

    letter-spacing:
        1.7px;

}


.archive-header h1 {

    margin:
        0 0 8px;

    color:
        #405844;

    font-size:
        29px;

    font-weight:
        300;

}


.archive-header p {

    max-width:
        600px;

    margin:
        0;

    color:
        #71806e;

    font-size:
        9px;

    line-height:
        1.7;

}


/* =========================================================
   CONTADOR
========================================================= */

.archive-counter {

    min-width:
        125px;

    padding:
        12px
        15px;

    border-left:
        1px solid
        rgba(120,145,112,.3);

    text-align:
        right;

}


.archive-counter span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #91a08d;

    font-size:
        6px;

    letter-spacing:
        1px;

}


.archive-counter strong {

    color:
        #587058;

    font-size:
        21px;

    font-weight:
        300;

}


/* =========================================================
   FILTROS
========================================================= */

.archive-filters {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-bottom:
        12px;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(120,145,112,.28);

    border-radius:
        8px
        8px
        4px
        4px;

    background:
        rgba(245,250,242,.45);

}


.filter-title {

    margin:
        0 5px 0 2px;

    color:
        #91a08d;

    font-size:
        6px;

    letter-spacing:
        1.1px;

}


.archive-filter {

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(130,155,120,.32);

    border-radius:
        6px
        6px
        3px
        3px;

    background:
        rgba(255,255,255,.38);

    color:
        #71806e;

    font-family:
        inherit;

    font-size:
        7px;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease;

}


.archive-filter:hover {

    border-color:
        rgba(100,135,95,.5);

    background:
        rgba(255,255,255,.65);

}


.archive-filter.active {

    border-color:
        #9db397;

    background:
        rgba(211,230,205,.65);

    color:
        #4d674e;

}


/* =========================================================
   LISTA
========================================================= */

.archive-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


/* =========================================================
   DOCUMENTO
========================================================= */

.archive-document {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        55px
        minmax(0,1fr)
        100px
        25px;

    align-items:
        center;

    gap:
        18px;

    min-height:
        105px;

    padding:
        14px
        18px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(120,145,112,.42);

    border-radius:
        10px
        10px
        4px
        4px;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.72),
            rgba(232,243,228,.42)
        );

    color:
        inherit;

    text-decoration:
        none;

    box-shadow:
        inset
        0 1px
        rgba(255,255,255,.9);

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;

}


/* brilho Aero */

.archive-document::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        45%;

    height:
        1px;

    background:
        rgba(255,255,255,.9);

}


/* hover */

.archive-document:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(105,140,100,.6);

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.86),
            rgba(220,237,215,.58)
        );

    box-shadow:
        inset
        0 1px
        rgba(255,255,255,.95),
        0 5px 14px
        rgba(70,100,65,.1);

}


/* =========================================================
   NÚMERO
========================================================= */

.archive-number {

    align-self:
        stretch;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-right:
        1px solid
        rgba(125,150,115,.28);

    color:
        #9aa896;

    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1px;

}


/* =========================================================
   CONTEÚDO
========================================================= */

.archive-document-main {

    min-width:
        0;

}


.archive-category {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #82927e;

    font-size:
        6px;

    letter-spacing:
        1.2px;

}


.archive-document h2 {

    margin:
        0 0 5px;

    overflow:
        hidden;

    color:
        #4a604c;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.archive-document p {

    max-width:
        600px;

    margin:
        0;

    overflow:
        hidden;

    color:
        #7b8978;

    font-size:
        8px;

    line-height:
        1.5;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* =========================================================
   METADADOS
========================================================= */

.archive-document-meta {

    padding-left:
        12px;

    border-left:
        1px solid
        rgba(125,150,115,.25);

}


.archive-document-meta span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #a0aa9d;

    font-size:
        5px;

    letter-spacing:
        1px;

}


.archive-document-meta strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #657560;

    font-size:
        7px;

    font-weight:
        400;

}


.archive-document-meta strong:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   SETA
========================================================= */

.archive-arrow {

    color:
        #789174;

    font-size:
        13px;

    opacity:
        .55;

    transition:
        transform .15s ease,
        opacity .15s ease;

}


.archive-document:hover .archive-arrow {

    transform:
        translateX(3px);

    opacity:
        1;

}


/* =========================================================
   DOCUMENTO ESCONDIDO PELO FILTRO
========================================================= */

.archive-document.hidden {

    display:
        none;

}


/* =========================================================
   AVISO FINAL
========================================================= */

.archive-note {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        13px;

    padding:
        11px;

    border:
        1px solid
        rgba(130,155,120,.25);

    border-radius:
        8px
        8px
        3px
        3px;

    background:
        rgba(245,250,242,.38);

    color:
        #899a85;

    font-size:
        7px;

    letter-spacing:
        .4px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {


    .archive-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

    }


    .archive-counter {

        width:
            100%;

        padding:
            10px 0 0;

        border-left:
            none;

        border-top:
            1px solid
            rgba(120,145,112,.3);

        text-align:
            left;

    }


    .archive-document {

        grid-template-columns:
            38px
            minmax(0,1fr)
            20px;

        gap:
            10px;

        padding:
            12px;

    }


    .archive-document-meta {

        display:
            none;

    }


    .archive-document h2 {

        font-size:
            12px;

    }


    .archive-document p {

        white-space:
            normal;

    }


    .archive-number {

        font-size:
            7px;

    }


    .archive-filters {

        align-items:
            flex-start;

    }


    .filter-title {

        width:
            100%;

        margin-bottom:
            2px;

    }

}

/* =========================================================
   CARTAS & CORRESPONDÊNCIA
========================================================= */


/* =========================================================
   DESTAQUE
========================================================= */

.letters-hero {

    min-height: 245px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        245px;

    gap: 20px;

    padding: 28px;

    margin-bottom: 13px;

    overflow: hidden;

    position: relative;

    border-radius:
        12px
        12px
        5px
        5px;

    background:

        radial-gradient(
            circle at 88% 30%,
            rgba(170,220,145,.48),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(224,241,218,.68)
        );

}


.letters-hero-text {

    position: relative;

    z-index: 2;

}


.letters-hero h2 {

    margin:
        9px
        0
        11px;

    color: #31573b;

    font-size: 27px;

    font-weight: 300;

    line-height: 1.25;

}


.letters-hero p {

    max-width: 560px;

    margin:
        7px
        0;

    color: #596b58;

    font-size: 10px;

    line-height: 1.7;

}


.letters-button {

    display: inline-block;

    margin-top: 10px;

    text-decoration: none;

}


.letters-hero-image {

    min-height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    border:
        1px dashed
        #8da787;

    border-radius:
        14px
        14px
        5px
        5px;

    background:

        linear-gradient(
            145deg,
            rgba(215,240,206,.8),
            rgba(242,250,238,.7)
        );

    color: #80987a;

    font-size: 8px;

}


.letters-hero-image::before {

    content: "";

    position: absolute;

    top: -25px;

    left: 10%;

    width: 80%;

    height: 55px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.6);

}


.envelope-symbol {

    width: 82px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    border:
        1px solid
        #82977c;

    border-radius: 7px;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #dcebd7
        );

    color: #56835a;

    font-size: 30px;

    box-shadow:

        inset
        0 2px
        rgba(255,255,255,.9),

        0 4px 8px
        rgba(55,90,55,.16);

}


/* =========================================================
   NOTA
========================================================= */

.letter-note {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius:
        10px
        10px
        4px
        4px;

}


.letter-note .box-content p {

    max-width: 750px;

}


/* =========================================================
   TÍTULO DE SEÇÃO
========================================================= */

.letters-section {

    margin-bottom: 14px;

}


.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;

    margin:
        18px
        2px
        10px;

}


.section-heading h2 {

    margin:
        3px
        0
        0;

    color: #4a604c;

    font-size: 17px;

    font-weight: 300;

}


.section-count {

    color: #82927e;

    font-size: 7px;

    white-space: nowrap;

}


/* =========================================================
   MURAL
========================================================= */

.correspondent-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

}


.correspondent-card {

    min-width: 0;

    display: grid;

    grid-template-columns:
        92px
        minmax(0,1fr);

    min-height: 190px;

    overflow: hidden;

    border-radius:
        10px
        10px
        4px
        4px;

    text-decoration: none;

}


.correspondent-photo {

    min-height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-right:
        1px solid
        rgba(130,155,120,.45);

    background:

        linear-gradient(
            145deg,
            #c8e7bf,
            #eef7eb
        );

    color: #82977d;

    font-size: 8px;

}


.correspondent-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.correspondent-content {

    min-width: 0;

    padding:
        15px
        14px;

}


.correspondent-number {

    display: block;

    margin-bottom: 5px;

    color: #94a390;

    font-size: 6px;

    letter-spacing: 1.1px;

}


.correspondent-content h3 {

    margin:
        0
        2px;

    color: #405844;

    font-size: 17px;

    font-weight: 300;

}


.correspondent-location {

    display: block;

    margin-bottom: 9px;

    color: #82927e;

    font-size: 7px;

}


.correspondent-content p {

    margin:
        0
        9px;

    color: #647361;

    font-size: 8px;

    line-height: 1.6;

}


.interest-list {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    margin-bottom: 10px;

}


.interest-list span {

    padding:
        4px
        6px;

    border:
        1px solid
        rgba(130,155,120,.3);

    border-radius: 5px;

    background:
        rgba(220,237,215,.42);

    color: #748471;

    font-size: 6px;

}


.correspondent-link {

    color: #438249;

    font-size: 8px;

    text-decoration: none;

}


.correspondent-link:hover {

    text-decoration: underline;

}


/* =========================================================
   CARTAS GUARDADAS
========================================================= */

.saved-letters {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius:
        10px
        10px
        4px
        4px;

}


.saved-letters-intro {

    padding:
        12px
        16px
        4px;

}


.saved-letters-intro p {

    max-width: 700px;

    margin: 0;

    color: #667564;

    font-size: 9px;

    line-height: 1.65;

}


.letter-list {

    padding:
        5px
        8px;

}


.letter-item {

    min-height: 63px;

    display: grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        25px;

    align-items: center;

    gap: 10px;

    padding:
        7px
        8px;

    border-bottom:
        1px solid
        rgba(150,170,143,.3);

    color: inherit;

    text-decoration: none;

}


.letter-item:last-child {

    border-bottom: none;

}


.letter-item:hover {

    background:
        rgba(220,240,214,.45);

}


.letter-icon {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        #9aac94;

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            white,
            #d8e8d2
        );

    color: #548358;

}


.letter-main {

    min-width: 0;

}


.letter-main span {

    display: block;

    margin-bottom: 3px;

    color: #94a390;

    font-size: 6px;

    letter-spacing: 1px;

}


.letter-main strong {

    display: block;

    overflow: hidden;

    color: #4a604c;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.3;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.letter-main small {

    display: block;

    margin-top: 3px;

    color: #82907d;

    font-size: 7px;

}


.letter-arrow {

    color: #789170;

    font-size: 12px;

    opacity: .55;

}


.letter-item:hover .letter-arrow {

    opacity: 1;

    transform: translateX(3px);

}


.letters-more {

    padding:
        8px
        14px
        13px;

    text-align: right;

}


.letters-more a {

    color: #438249;

    font-size: 8px;

    text-decoration: none;

}


.letters-more a:hover {

    text-decoration: underline;

}


/* =========================================================
   CARTA FAVORITA
========================================================= */

.favorite-letter {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius:
        10px
        10px
        4px
        4px;

}


.favorite-letter-content {

    display: grid;

    grid-template-columns:
        180px
        minmax(0,1fr);

    gap: 18px;

    padding: 15px;

}


.letter-photo-placeholder {

    min-height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px dashed
        #91a58a;

    border-radius: 8px;

    background:

        linear-gradient(
            135deg,
            #d3e9cb,
            #f1f8ee
        );

    color: #82977d;

    font-size: 7px;

}


.favorite-letter-content img {

    width: 100%;

    height: 125px;

    display: block;

    object-fit: cover;

    border-radius: 8px;

}


.favorite-letter-content .tiny {

    margin-bottom: 6px;

}


.favorite-letter-content h3 {

    margin:
        0
        0
        8px;

    color: #4a604c;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.35;

}


.favorite-letter-content p {

    margin:
        0
        0
        10px;

    color: #657560;

    font-size: 9px;

    line-height: 1.65;

}


.favorite-letter-content a {

    color: #438249;

    font-size: 8px;

    text-decoration: none;

}


.favorite-letter-content a:hover {

    text-decoration: underline;

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 800px) {

    .letters-hero {

        grid-template-columns:
            1fr;

    }


    .letters-hero-image {

        min-height: 140px;

    }


    .correspondent-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 650px) {

    .section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 4px;

    }


    .favorite-letter-content {

        grid-template-columns:
            1fr;

    }


    .letter-photo-placeholder {

        min-height:
            150px;

    }


    .favorite-letter-content img {

        height:
            150px;

    }


    .correspondent-card {

        grid-template-columns:
            78px
            minmax(0,1fr);

    }


    .correspondent-photo {

        min-height:
            180px;

    }

}

/* =========================================================
   OITO DE BILHAR
   CÓDIGOS & PALAVRAS
   ESTILO FRUTIGER AERO / ARQUIVO PESSOAL
========================================================= */


/* =========================================================
   INTRODUÇÃO
========================================================= */

main.main .code-intro {

    display: grid !important;

    grid-template-columns: 64px minmax(0, 1fr) !important;

    gap: 18px;

    width: 100%;

    box-sizing: border-box;

    padding: 18px 20px;

    margin-bottom: 22px;

    position: relative;

    overflow: hidden;

    border-radius:
        9px
        9px
        3px
        3px;

}


/* pequeno brilho no topo */

main.main .code-intro::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 48%;
    height: 1px;

    background: rgba(255,255,255,.95);

}


/* símbolo */

main.main .code-intro-symbol {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    align-self: start;

    border:
        1px solid
        #9caf99;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #f5faf1 0%,
            #dcebd5 55%,
            #c7dfbf 100%
        );

    color:
        #638060;

    font-size: 21px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 4px rgba(100,130,95,.08),
        0 2px 4px rgba(80,110,75,.08);

}


/* conteúdo */

main.main .code-intro-text {

    min-width: 0;

}


/* etiqueta */

main.main .code-label {

    display: block;

    margin: 1px 0 5px;

    color:
        #899887;

    font-size: 6px !important;

    line-height: 1.3;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


/* título */

main.main .code-intro h1 {

    margin:
        0 0 10px !important;

    color:
        #405744;

    font-family:
        inherit;

    font-size:
        22px !important;

    font-weight:
        400;

    line-height:
        1.2 !important;

}


/* parágrafos */

main.main .code-intro p {

    max-width: 700px;

    margin:
        0 0 7px !important;

    color:
        #647362;

    font-size:
        9px !important;

    font-weight:
        400;

    line-height:
        1.65 !important;

}


main.main .code-intro-final {

    margin-bottom: 0 !important;

    color:
        #506b52 !important;

    font-style:
        italic;

}


/* =========================================================
   CABEÇALHOS DAS SEÇÕES
========================================================= */

main.main .code-section {

    width: 100%;

    margin:
        0 0 22px;

}


main.main .section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;

}


main.main .section-heading > div {

    min-width: 0;

}


main.main .section-heading > div > span {

    display: block;

    margin-bottom: 3px;

    color:
        #8b9988;

    font-size: 6px !important;

    line-height: 1.3;

    letter-spacing: 1.3px;

}


main.main .section-heading h2 {

    margin: 0 !important;

    color:
        #506550;

    font-family:
        inherit;

    font-size:
        16px !important;

    font-weight:
        400;

    line-height:
        1.25 !important;

}


main.main .section-heading small {

    max-width: 190px;

    color:
        #8a9687;

    font-size:
        7px !important;

    line-height: 1.4 !important;

    text-align: right;

}


/* =========================================================
   FILTROS
========================================================= */

main.main .word-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    margin:
        0 0 7px;

}


main.main .word-filter {

    box-sizing: border-box;

    padding:
        4px 8px;

    border:
        1px solid
        rgba(125,150,115,.42);

    border-radius:
        5px
        5px
        2px
        2px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.72),
            rgba(225,237,220,.52)
        );

    color:
        #647662;

    font-family:
        inherit;

    font-size:
        7px !important;

    line-height:
        1.25;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);

    cursor: pointer;

}


main.main .word-filter:hover {

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.9),
            rgba(218,234,212,.7)
        );

    border-color:
        #91a88c;

}


main.main .word-filter.active {

    background:
        linear-gradient(
            to bottom,
            #dcefd5,
            #b9dbaF
        );

    border-color:
        #8cab84;

    color:
        #486449;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 1px 2px rgba(90,120,85,.08);

}


/* =========================================================
   GRADE DE PALAVRAS
========================================================= */

main.main .word-grid {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 8px !important;

    width: 100%;

}


/* =========================================================
   CARTÃO DE PALAVRA
========================================================= */

main.main .word-card {

    position: relative;

    display: block;

    min-width: 0;

    min-height: 145px;

    box-sizing: border-box;

    padding:
        13px
        14px;

    overflow: hidden;

    border:
        1px solid
        rgba(119,145,110,.40);

    border-radius:
        8px
        8px
        3px
        3px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(239,246,235,.62)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(170,195,160,.10);

}


/* brilho da borda */

main.main .word-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 55%;
    height: 1px;

    background:
        rgba(255,255,255,.95);

}


/* número */

main.main .word-number {

    display: block;

    margin-bottom: 6px;

    color:
        #9aa796;

    font-size:
        6px !important;

    line-height: 1.2;

    letter-spacing: 1px;

}


/* palavra */

main.main .word-card h3 {

    margin:
        0 0 4px !important;

    color:
        #405a44;

    font-family:
        inherit;

    font-size:
        16px !important;

    font-weight:
        500;

    line-height:
        1.25 !important;

}


/* classe gramatical */

main.main .word-type {

    display: block;

    margin-bottom: 8px;

    color:
        #82917d;

    font-size:
        6px !important;

    font-style:
        italic;

    line-height:
        1.3;

}


/* definição */

main.main .word-card p,
main.main .word-card .word-definition {

    margin:
        0 !important;

    color:
        #647362;

    font-size:
        8px !important;

    font-weight:
        400;

    line-height:
        1.6 !important;

}


/* categoria */

main.main .word-card small {

    display: block;

    margin-top: 11px;

    padding-top: 7px;

    border-top:
        1px solid
        rgba(130,155,120,.18);

    color:
        #919e8d;

    font-size:
        6px !important;

    line-height:
        1.3;

}


/* =========================================================
   CÓDIGOS
========================================================= */

main.main .code-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


/* cartão */

main.main .cipher-card {

    display: grid !important;

    grid-template-columns:
        38px
        minmax(0,1fr)
        45px !important;

    align-items: center;

    gap: 12px;

    min-height: 86px;

    box-sizing: border-box;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(119,145,110,.40);

    border-radius:
        8px
        8px
        3px
        3px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(239,246,235,.62)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);

}


/* número */

main.main .cipher-number {

    align-self: stretch;

    display: flex;

    align-items: center;
    justify-content: center;

    border-right:
        1px solid
        rgba(125,150,115,.20);

    color:
        #9ba796;

    font-size:
        7px !important;

    letter-spacing:
        1px;

}


/* conteúdo */

main.main .cipher-content {

    min-width: 0;

}


main.main .cipher-content > span {

    display: block;

    margin-bottom: 3px;

    color:
        #8b9988;

    font-size:
        6px !important;

    line-height:
        1.3;

    letter-spacing:
        1.1px;

}


main.main .cipher-content h3 {

    margin:
        0 0 4px !important;

    color:
        #49604c;

    font-size:
        12px !important;

    font-weight:
        500;

    line-height:
        1.25 !important;

}


main.main .cipher-content p {

    max-width: 620px;

    margin:
        0 0 6px !important;

    color:
        #6d7c6b;

    font-size:
        8px !important;

    line-height:
        1.5 !important;

}


/* exemplo */

main.main .cipher-example {

    display: flex;

    align-items: center;

    gap: 6px;

}


main.main .cipher-example span {

    color:
        #9aa796;

    font-size:
        6px !important;

}


main.main .cipher-example code {

    padding:
        3px 7px;

    border:
        1px solid
        rgba(125,150,115,.25);

    border-radius:
        3px;

    background:
        rgba(218,234,213,.55);

    color:
        #567057;

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px !important;

}


/* símbolo da direita */

main.main .cipher-mark {

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        #789473;

    font-family:
        "Courier New",
        monospace;

    font-size:
        14px !important;

    opacity:
        .65;

}


/* =========================================================
   EXPERIMENTO
========================================================= */

main.main .experiment-box {

    padding:
        14px
        17px;

    border:
        1px solid
        rgba(119,145,110,.40);

    border-radius:
        8px
        8px
        3px
        3px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(239,246,235,.62)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);

}


main.main .experiment-title {

    margin-bottom: 9px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(130,155,120,.20);

}


main.main .experiment-title span {

    color:
        #668062;

    font-size:
        7px !important;

}


main.main .experiment-title small {

    color:
        #9aa796;

    font-size:
        6px !important;

}


main.main .experiment-box > p {

    margin:
        0 0 9px !important;

    color:
        #6d7b6b;

    font-size:
        8px !important;

    line-height:
        1.55 !important;

}


main.main .experiment-code {

    padding:
        11px;

    border:
        1px dashed
        rgba(120,145,112,.35);

    border-radius:
        5px;

    background:
        rgba(220,235,215,.35);

}


main.main .experiment-code code {

    color:
        #526b54;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px !important;

    letter-spacing:
        2px;

}


/* =========================================================
   ÁREA SECRETA
========================================================= */

main.main .secret-section {

    position: relative;

    margin:
        22px 0 12px;

    padding:
        17px;

    overflow: hidden;

    border:
        1px solid
        rgba(105,132,99,.42);

    border-radius:
        9px
        9px
        3px
        3px;

    background:
        linear-gradient(
            145deg,
            rgba(226,240,221,.68),
            rgba(248,251,246,.48)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85);

    text-align: center;

}


main.main .secret-header {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

}


main.main .secret-header > span {

    color:
        #7e9879;

    font-size:
        14px !important;

}


main.main .secret-header > div > span {

    display: block;

    margin-bottom: 3px;

    color:
        #8e9d8b;

    font-size:
        6px !important;

    letter-spacing:
        1.3px;

}


main.main .secret-header h2 {

    margin: 0;

    color:
        #4d644f;

    font-size:
        14px !important;

    font-weight:
        400;

}


main.main .secret-section > p {

    max-width: 500px;

    margin:
        8px auto 0 !important;

    color:
        #748272;

    font-size:
        8px !important;

    line-height:
        1.6 !important;

}


main.main .secret-symbols {

    display: flex;

    justify-content: center;

    gap: 6px;

    margin-top: 13px;

}


main.main .secret-symbol {

    width: 32px;
    height: 27px;

    padding: 0;

    border:
        1px solid
        rgba(125,150,115,.38);

    border-radius:
        5px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.75),
            rgba(225,238,220,.5)
        );

    color:
        #718b6d;

    font-size:
        12px !important;

    cursor: pointer;

}


main.main .secret-symbol:hover {

    background:
        rgba(255,255,255,.9);

    transform:
        translateY(-1px);

}


/* mensagem */

main.main .secret-message {

    max-width: 450px;

    margin:
        0 auto;

    padding: 0;

    color:
        #587058;

    font-size:
        8px !important;

    line-height:
        1.6 !important;

    opacity: 0;

}


main.main .secret-message.visible {

    margin-top: 10px;

    padding: 8px;

    border:
        1px solid
        rgba(130,155,120,.22);

    border-radius:
        4px;

    background:
        rgba(255,255,255,.38);

    opacity: 1;

}


/* =========================================================
   MENSAGEM ESCONDIDA
========================================================= */

main.main .hidden-message {

    margin-top:
        11px;

    padding:
        11px;

    text-align:
        center;

    border:
        1px solid
        rgba(130,155,120,.25);

    border-radius:
        8px
        8px
        3px
        3px;

    background:
        rgba(245,250,242,.42);

}


main.main .hidden-label {

    display: block;

    margin-bottom: 6px;

    color:
        #9aa896;

    font-size:
        5px !important;

    letter-spacing:
        1.5px;

}


main.main .hidden-message p {

    margin:
        0 0 6px;

    color:
        #70876d;

    font-family:
        "Courier New",
        monospace;

    font-size:
        9px !important;

    letter-spacing:
        1.5px;

}


main.main .hidden-message small {

    color:
        #98a392;

    font-size:
        6px !important;

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 900px) {

    main.main .word-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

    }

}


@media (max-width: 700px) {

    main.main .code-intro {

        grid-template-columns:
            1fr !important;

        gap: 10px;

    }


    main.main .code-intro-symbol {

        width: 48px;
        height: 48px;

    }


    main.main .code-intro h1 {

        font-size: 20px !important;

    }


    main.main .code-intro p {

        font-size: 8px !important;

    }


    main.main .section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 5px;

    }


    main.main .section-heading small {

        max-width: none;

        text-align: left;

    }


    main.main .word-grid {

        grid-template-columns:
            1fr !important;

    }


    main.main .cipher-card {

        grid-template-columns:
            31px
            minmax(0,1fr) !important;

    }


    main.main .cipher-mark {

        display: none;

    }

}