/* ==========================================================================
   Pontolito — folha de estilo
   Linguagem visual: página de jornal (papel, tinta, fios e colunas) + o "ponto"
   de retícula como marca. Sem frameworks.

   1. Fontes e variáveis      6. Home                11. Artigos
   2. Base                    7. Blocos comuns       12. Contato
   3. Tipografia              8. Capas internas      13. Rodapé
   4. Botões e links          9. Serviços            14. Movimento e impressão
   5. Topo, cabeçalho, menu  10. Publicidades legais
   ========================================================================== */

/* 1. Fontes e variáveis ---------------------------------------------------- */

@font-face {
    font-family: "Newsreader Display";
    src: url("../fonts/newsreader-display.woff2") format("woff2");
    font-weight: 400 650;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader Display";
    src: url("../fonts/newsreader-display-italic.woff2") format("woff2");
    font-weight: 400 650;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/libre-franklin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* papel e tinta */
    --papel: #f5f2ea;
    --papel-2: #ece8dc;
    --papel-3: #e1dccd;
    --branco: #fffdf8;
    --tinta: #111a15;
    --tinta-2: #38433c;
    --tinta-3: #59635c;
    --fio: rgba(17, 26, 21, .15);
    --fio-claro: rgba(245, 242, 234, .18);

    /* verde da marca (o #00a85a do logo) e derivados */
    --verde: #00a85a;
    --verde-vivo: #12c06d;
    --verde-suave: #74dea9;
    --verde-texto: #00703e;
    --verde-escuro: #0b3d2a;
    --verde-noite: #072a1d;
    --verde-claro: #d8eee1;
    --erro: #a8281e;

    --serifa: "Newsreader Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

    --largura: 1200px;
    --margem: clamp(20px, 4vw, 40px);
    --secao: clamp(64px, 9vw, 128px);
    --cab-h: 76px;
    /* cantos sempre vivos e nada de desfoque: o relevo vem de um fio fino
       e de uma sombra seca, deslocada, como papel sobre papel */
    --contorno: 0 0 0 1px rgba(17, 26, 21, .16);
    --sombra: 6px 6px 0 rgba(17, 26, 21, .1);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 2. Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--cab-h) + 24px);
}

body {
    margin: 0;
    background-color: var(--papel);
    /* grão sutil de papel */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overflow-x: clip;
}

img,
svg,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

/* Proteção (config 'protecao'): imagens não podem ser arrastadas nem salvas pelo toque longo */
[data-protegido] img,
[data-protegido] svg,
[data-protegido] .cab__logo,
[data-protegido] .rodape__marca a {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
dd,
figure,
blockquote {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: var(--verde);
    color: var(--tinta);
}

:focus-visible {
    outline: 2px solid var(--verde-texto);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pular {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--tinta);
    color: var(--papel);
    font-weight: 600;
    transition: top .2s;
}

.pular:focus {
    top: 12px;
}

.container {
    width: min(100% - 2 * var(--margem), var(--largura));
    margin-inline: auto;
}

.secao {
    padding-block: var(--secao);
    position: relative;
}

.secao--fio {
    border-top: 1px solid var(--fio);
}

.secao--papel2 {
    background: var(--papel-2);
}

.icone {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

/* 3. Tipografia ------------------------------------------------------------ */

h1,
h2,
h3,
.t-1,
.t-2,
.t-3 {
    font-family: var(--serifa);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.06;
    text-wrap: balance;
}

.t-1 {
    font-size: clamp(2.5rem, 5.2vw, 4.5rem);
    letter-spacing: -.028em;
    line-height: 1.02;
}

.t-2 {
    font-size: clamp(2rem, 3.7vw, 3.25rem);
    letter-spacing: -.024em;
}

.t-3 {
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.15;
}

.t-1 em,
.t-2 em,
.t-3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--verde-texto);
}

/* o ponto final verde dos títulos */
.pt {
    color: var(--verde);
    font-style: normal;
}

/* chapéu: o rótulo que vem acima dos títulos, como nos jornais */
.chapeu {
    display: flex;
    align-items: center;
    gap: .7em;
    margin-bottom: 20px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.chapeu::before {
    content: "";
    width: .62em;
    height: .62em;
    background: var(--verde);
    flex: none;
}

.lead {
    font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
    line-height: 1.55;
    color: var(--tinta-2);
    max-width: 38em;
    text-wrap: pretty;
}

.texto p {
    color: var(--tinta-2);
    text-wrap: pretty;
}

.texto p + p {
    margin-top: 1.1em;
}

.texto strong {
    color: var(--tinta);
    font-weight: 600;
}

/* 4. Botões e links -------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    min-height: 54px;
    padding: 0 1.6em;
    border: 1.5px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: none;
}

.btn--p {
    min-height: 44px;
    padding: 0 1.2em;
    font-size: .9375rem;
}

.btn--verde {
    background: var(--verde);
    color: var(--tinta);
}

.btn--verde:hover {
    background: var(--verde-vivo);
}

.btn--tinta {
    background: var(--tinta);
    color: var(--papel);
}

.btn--tinta:hover {
    background: var(--verde-escuro);
}

.btn--linha {
    border-color: currentColor;
    background: transparent;
}

.btn--linha:hover {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--papel);
}

.sec--escura .btn--linha:hover,
.artigo__fim .btn--linha:hover,
.chamada .btn--linha:hover {
    background: var(--papel);
    border-color: var(--papel);
    color: var(--tinta);
}

.link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding-bottom: 3px;
    font-weight: 600;
    background: linear-gradient(var(--verde), var(--verde)) left bottom / 100% 1.5px no-repeat;
    transition: background-size .3s var(--ease), color .2s;
}

.link .icone {
    width: 1.05em;
    height: 1.05em;
    transition: transform .3s var(--ease);
}

.link:hover {
    color: var(--verde-texto);
}

.link:hover .icone {
    transform: translateX(4px);
}

.sec--escura .link:hover {
    color: var(--verde-vivo);
}

/* 5. Topo, cabeçalho, menu ------------------------------------------------- */

.topo {
    background: var(--tinta);
    color: rgba(245, 242, 234, .74);
    font-size: .8125rem;
    line-height: 1.2;
}

.topo__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}

.topo__contatos {
    display: flex;
    gap: 24px;
}

.topo__contatos a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .2s;
}

.topo__contatos a:hover {
    color: #fff;
}

.topo__contatos .icone {
    width: 14px;
    height: 14px;
    color: var(--verde-vivo);
}

.cab {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--papel);
    border-bottom: 1px solid var(--fio);
    transition: border-color .3s;
}

/* ao rolar, o fio do cabeçalho escurece e separa o menu do conteúdo */
.cab--rolou {
    border-bottom-color: var(--tinta);
}

.cab__in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--cab-h);
}

.cab__logo {
    flex: none;
    display: block;
}

.cab__logo img {
    width: 164px;
    height: auto;
}

.menu {
    margin-left: auto;
}

.menu__lista {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 30px);
}

.menu__lista a {
    position: relative;
    display: block;
    padding: 10px 0;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
}

.menu__lista a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: var(--verde);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}

.menu__lista a:hover::after,
.menu__lista a[aria-current]::after {
    transform: scaleX(1);
}

.menu__extra {
    display: none;
}

.menu-btn {
    display: none;
    width: 46px;
    height: 46px;
    margin-left: auto;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: transparent;
    place-items: center;
}

.menu-btn__barras,
.menu-btn__barras::before,
.menu-btn__barras::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--tinta);
    transition: transform .3s var(--ease), background-color .2s;
}

.menu-btn__barras {
    position: relative;
}

.menu-btn__barras::before,
.menu-btn__barras::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-btn__barras::before {
    top: -7px;
}

.menu-btn__barras::after {
    top: 7px;
}

.menu-aberto .menu-btn__barras {
    background: transparent;
}

.menu-aberto .menu-btn__barras::before {
    transform: translateY(7px) rotate(45deg);
}

.menu-aberto .menu-btn__barras::after {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1139px) {
    :root {
        --cab-h: 66px;
    }

    .cab__cta {
        display: none;
    }

    .cab__logo img {
        width: 148px;
    }

    .menu-btn {
        display: grid;
    }

    html:not(.js) .menu-btn {
        display: none;
    }

    .topo__email {
        display: none;
    }

    /* sem JavaScript o menu fica visível, empilhado; com JS vira painel */
    .cab__in {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--cab-h);
    }

    .menu {
        order: 3;
        width: 100%;
        margin: 0;
        padding-bottom: 16px;
    }

    .menu__lista {
        flex-wrap: wrap;
        gap: 4px 20px;
    }

    .js .menu-btn {
        order: 2;
    }

    .js .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100vh - var(--cab-h));
        height: calc(100dvh - var(--cab-h));
        padding: 12px var(--margem) 32px;
        overflow-y: auto;
        background: var(--papel);
        border-top: 1px solid var(--fio);
        display: flex;
        flex-direction: column;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
    }

    .js.menu-aberto .menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .25s, transform .3s var(--ease);
    }

    .js .menu__lista {
        display: block;
    }

    .js .menu__lista li {
        border-bottom: 1px solid var(--fio);
    }

    .js .menu__lista a {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 0;
        font-family: var(--serifa);
        font-size: 1.75rem;
        font-weight: 500;
        letter-spacing: -.02em;
        line-height: 1.1;
    }

    .js .menu__lista a::after {
        position: static;
        order: -1;
        width: 9px;
        height: 9px;
        transform: none;
        opacity: 0;
        flex: none;
    }

    .js .menu__lista a[aria-current]::after {
        opacity: 1;
    }

    .js .menu__lista a:not([aria-current])::after {
        display: none;
    }

    .js .menu__extra {
        display: grid;
        gap: 20px;
        margin-top: auto;
        padding-top: 28px;
    }

    .js .menu__extra p {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 20px;
        font-size: .9375rem;
        color: var(--tinta-2);
    }

    html.menu-aberto {
        overflow: hidden;
    }
}

@media (max-width: 520px) {
    .topo__data span {
        display: none;
    }

    /* sem a cidade na frente, a data começa a linha: inicial maiúscula */
    .topo__data time {
        display: inline-block;
    }

    .topo__data time::first-letter {
        text-transform: uppercase;
    }
}

/* 6. Home ------------------------------------------------------------------ */

/* 6.1 Abertura */

.hero {
    position: relative;
    padding-block: clamp(40px, 4.6vw, 68px) clamp(56px, 6vw, 84px);
    overflow: hidden;
}

.hero__ponto {
    position: absolute;
    right: -150px;
    top: -110px;
    width: min(62vw, 820px);
    aspect-ratio: 1;
    background: var(--verde);
    opacity: .2;
    -webkit-mask: url("../img/ponto.svg") center / contain no-repeat;
    mask: url("../img/ponto.svg") center / contain no-repeat;
    transform: scaleX(-1) rotate(-18deg);
    pointer-events: none;
}

.hero__grade {
    position: relative;
    display: grid;
    gap: clamp(48px, 6vw, 76px);
    align-items: center;
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 34px;
}

.hero .lead {
    margin-top: 26px;
}

.hero__lista {
    display: grid;
    gap: 12px 28px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--fio);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tinta-2);
}

.hero__lista li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.hero__lista .icone {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    padding: 3px;
    background: var(--verde);
    color: var(--tinta);
    stroke-width: 2.6;
}

@media (min-width: 560px) {
    .hero__lista {
        grid-template-columns: repeat(3, auto);
        justify-content: start;
    }

    .hero__lista li {
        max-width: 11.5em;
    }
}

@media (min-width: 1024px) {
    .hero__grade {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }
}

/* 6.2 A "página de jornal" da abertura (tudo em em: escala com a largura) */

.vitrine-wrap {
    container-type: inline-size;
    position: relative;
    width: min(100%, 520px);
    margin-inline: auto;
}

.vitrine {
    position: relative;
    height: 58em;
    font-size: 10px;
    font-size: 2cqi;
}

.folha {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 2.6em 2.8em 0;
    background: #fffefb;
    box-shadow: var(--contorno), 1.2em 1.2em 0 rgba(17, 26, 21, .1);
    transform: rotate(1.4deg);
}

.folha--fundo {
    background: #ebe6d9;
    box-shadow: var(--contorno);
    transform: rotate(-4.2deg) translate(-3.4%, .6%);
}

.folha__topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: .9em;
    border-bottom: .34em double var(--tinta);
    font-size: .76em;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1;
}

.folha__topo span + span {
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--tinta-3);
}

.folha__grade {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "a d d" "a b c";
    column-gap: 1.7em;
    row-gap: 3.4em;
    padding-top: 2.2em;
    min-height: 0;
    overflow: hidden;
}

.folha__col {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    min-height: 0;
    overflow: hidden;
}

.folha__col--a {
    grid-area: a;
    padding-right: 1.7em;
    border-right: 1px solid var(--fio);
    margin-right: -.85em;
}

.folha__col--b {
    grid-area: b;
}

.folha__col--c {
    grid-area: c;
    padding-left: 1.7em;
    border-left: 1px solid var(--fio);
    margin-left: -.85em;
}

/* texto "cego": linhas cinzas que imitam colunas de jornal */
.gr {
    --h: .28em;
    --g: .5em;
    flex: none;
    position: relative;
    height: calc(var(--n, 6) * (var(--h) + var(--g)));
    background: repeating-linear-gradient(to bottom, rgba(17, 26, 21, .17) 0 var(--h), transparent var(--h) calc(var(--h) + var(--g)));
}

.gr::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: var(--g);
    width: var(--corte, 40%);
    height: var(--h);
    background: #fffefb;
}

.gr-t {
    flex: none;
    height: .8em;
    width: 90%;
    background: rgba(17, 26, 21, .5);
}

.gr-t + .gr-t {
    width: 58%;
    margin-top: -.6em;
}

.gr-caixa {
    flex: none;
    display: grid;
    gap: .8em;
    padding: .9em;
    border: 1px solid rgba(17, 26, 21, .32);
}

.gr-caixa .gr-t {
    height: .55em;
    width: 70%;
    margin-inline: auto;
    background: rgba(17, 26, 21, .38);
}

.gr-caixa .gr::after {
    background: #fffefb;
}

/* a publicação em destaque */
.destaque {
    grid-area: d;
    position: relative;
    align-self: start;
    padding: 1.7em 1.6em 1.6em;
    background: #fff;
    border: .17em solid var(--verde);
    box-shadow: 0 0 0 .55em rgba(0, 168, 90, .11);
}

.destaque__tag {
    position: absolute;
    top: -1.1em;
    left: 1.3em;
    padding: .5em .75em;
    background: var(--verde);
    color: var(--tinta);
    font-size: .74em;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}

.edital {
    font-family: var(--sans);
    font-size: 1em;
    line-height: 1.36;
    color: var(--tinta);
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.edital__cab {
    margin-bottom: .75em;
    text-align: center;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: .01em;
    -webkit-hyphens: none;
    hyphens: none;
}

.edital__cab small {
    display: block;
    margin: .15em 0 .5em;
    font-size: .86em;
    font-weight: 500;
    letter-spacing: 0;
}

.edital mark {
    padding: 0 .12em;
    background: rgba(0, 168, 90, .26);
    color: inherit;
}

/* cotas de medida (cm × coluna, a unidade da publicidade legal) */
.cota {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6em;
    color: var(--verde-texto);
    font-size: .76em;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
}

.cota::before,
.cota::after {
    content: "";
    flex: 1;
    background: currentColor;
}

.cota--h {
    left: -.2em;
    right: -.2em;
    bottom: -2.5em;
    height: 1em;
    border-inline: 1px solid currentColor;
}

.cota--h::before,
.cota--h::after {
    height: 1px;
}

.cota--v {
    top: -.2em;
    bottom: -.2em;
    left: -2.3em;
    width: 1em;
    flex-direction: column;
    border-block: 1px solid currentColor;
}

.cota--v::before,
.cota--v::after {
    width: 1px;
}

.cota--v span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* carimbo */
.carimbo {
    position: absolute;
    right: -2em;
    top: 27.6em;
    width: 15.5em;
    height: 15.5em;
    color: var(--verde-texto);
    transform: rotate(-13deg);
    mix-blend-mode: multiply;
    opacity: .9;
    pointer-events: none;
}

.carimbo text {
    font-family: var(--sans);
    fill: currentColor;
}

/* selos flutuantes */
.selo {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px 11px 12px;
    background: var(--branco);
    border: 1px solid rgba(17, 26, 21, .32);
    box-shadow: var(--sombra);
    font-size: .8125rem;
    line-height: 1.25;
    white-space: nowrap;
}

.selo strong {
    display: block;
    font-weight: 700;
}

.selo span {
    color: var(--tinta-3);
    font-size: .75rem;
}

.selo .icone {
    width: 34px;
    height: 34px;
    padding: 8px;
    background: var(--verde-claro);
    color: var(--verde-texto);
}

.selo--1 {
    left: -44px;
    top: 47%;
}

.selo--2 {
    right: -30px;
    bottom: 5.5%;
}

@media (max-width: 1180px) {
    .selo--1 {
        left: -14px;
    }

    .selo--2 {
        right: -14px;
    }
}

@media (max-width: 600px) {
    .selo {
        padding: 8px 12px 8px 9px;
        gap: 8px;
        font-size: .75rem;
    }

    .selo span {
        font-size: .6875rem;
    }

    .selo .icone {
        width: 28px;
        height: 28px;
        padding: 6px;
    }

    .selo--1 {
        left: -8px;
        top: 52%;
    }

    .selo--2 {
        right: -8px;
        bottom: 3%;
    }
}

/* 6.3 Faixa de fatos */

.fatos {
    border-block: 1px solid var(--tinta);
    background: var(--papel);
}

.fatos__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fato {
    padding: 26px 20px 28px 0;
    border-bottom: 1px solid var(--fio);
}

.fato:nth-child(even) {
    padding-left: 20px;
    border-left: 1px solid var(--fio);
}

.fato:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.fato strong {
    display: block;
    font-family: var(--serifa);
    font-size: clamp(1.625rem, 2.5vw, 2.375rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1;
}

.fato span {
    display: block;
    margin-top: 10px;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--tinta-2);
}

@media (min-width: 900px) {
    .fatos__grade {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fato,
    .fato:nth-child(even) {
        padding: 30px 28px 32px;
        border-bottom: 0;
        border-left: 1px solid var(--fio);
    }

    .fato:first-child {
        padding-left: 0;
        border-left: 0;
    }
}

/* 7. Blocos comuns --------------------------------------------------------- */

/* cabeçalho de seção: título à esquerda, texto de apoio à direita */
.sec-cab {
    display: grid;
    gap: 20px;
    margin-bottom: clamp(36px, 5vw, 64px);
}

.sec-cab .chapeu {
    margin-bottom: 18px;
}

.sec-cab__lado {
    display: grid;
    gap: 20px;
    justify-items: start;
}

@media (min-width: 900px) {
    .sec-cab {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 64px;
        align-items: end;
    }
}

/* 7.1 Etapas (os quatro serviços como linha do tempo) */

.etapas {
    display: grid;
    border-top: 2px solid var(--tinta);
}

.etapa {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 0 34px;
    border-bottom: 1px solid var(--fio);
    transition: background-color .3s;
}

.etapa::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--verde);
    box-shadow: 0 0 0 5px var(--papel);
    transition: transform .3s var(--ease);
}

.etapa:hover::before {
    transform: scale(1.5);
}

.etapa__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    color: var(--verde-texto);
}

.etapa__n {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.etapa__topo .icone {
    width: 28px;
    height: 28px;
    stroke-width: 1.4;
}

.etapa h3 {
    font-size: 1.625rem;
    margin-bottom: 12px;
}

.etapa p {
    font-size: .9875rem;
    line-height: 1.55;
    color: var(--tinta-2);
    margin-bottom: 22px;
}

.etapa .link {
    margin-top: auto;
    align-self: flex-start;
    font-size: .9375rem;
}

@media (min-width: 700px) {
    .etapas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .etapa {
        padding: 30px 28px 34px;
    }

    .etapa::before {
        left: 28px;
    }

    .etapa:nth-child(even) {
        border-left: 1px solid var(--fio);
    }

    .etapa:nth-child(odd) {
        padding-left: 0;
    }

    .etapa:nth-child(odd)::before {
        left: 0;
    }

    .etapa:nth-child(n + 3)::before {
        display: none;
    }
}

@media (min-width: 1080px) {
    .etapas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .etapa,
    .etapa:nth-child(odd) {
        padding: 30px 26px 36px;
        border-bottom: 0;
        border-left: 1px solid var(--fio);
    }

    .etapa::before,
    .etapa:nth-child(odd)::before,
    .etapa:nth-child(n + 3)::before {
        left: 26px;
        display: block;
    }

    .etapa:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .etapa:first-child::before {
        left: 0;
    }

    .etapa:last-child {
        padding-right: 0;
    }
}

/* 7.2 Seção escura (publicações) */

.sec--escura {
    background: var(--verde-escuro);
    color: var(--papel);
    /* clip (e não hidden) para a coluna fixa continuar acompanhando a rolagem */
    overflow: hidden;
    overflow: clip;
}

.sec--escura .chapeu {
    color: rgba(245, 242, 234, .7);
}

.sec--escura .t-2 em,
.sec--escura .t-3 em {
    color: var(--verde-vivo);
}

.sec--escura .lead,
.sec--escura .texto p {
    color: rgba(245, 242, 234, .76);
}

.sec--escura__ret {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(60%, 760px);
    background: var(--verde);
    opacity: .16;
    -webkit-mask: url("../img/reticula.svg") center / 100% 100% no-repeat;
    mask: url("../img/reticula.svg") center / 100% 100% no-repeat;
    pointer-events: none;
}

.duas {
    position: relative;
    display: grid;
    gap: clamp(40px, 6vw, 88px);
}

.duas__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    margin-top: 32px;
}

.duas .lead {
    margin-top: 22px;
}

@media (min-width: 960px) {
    .duas {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .duas--fixa > :first-child {
        position: sticky;
        top: calc(var(--cab-h) + 40px);
    }
}

/* índice numerado (tipos de publicação) */
.indice li {
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr);
    gap: 4px 12px;
    padding: 20px 0;
    border-top: 1px solid var(--fio);
}

.indice li:last-child {
    border-bottom: 1px solid var(--fio);
}

.sec--escura .indice li {
    border-color: var(--fio-claro);
}

.indice__n {
    padding-top: .5em;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--verde-texto);
}

.sec--escura .indice__n {
    color: var(--verde-suave);
}

.indice h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.2;
}

.indice p {
    grid-column: 2;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--tinta-2);
}

.sec--escura .indice p {
    color: rgba(245, 242, 234, .66);
}

/* 7.3 Segmentos atendidos */

.segmentos {
    display: grid;
    border-top: 2px solid var(--tinta);
    border-left: 1px solid var(--fio);
}

.segmentos li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 22px 20px;
    border-right: 1px solid var(--fio);
    border-bottom: 1px solid var(--fio);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color .25s;
}

.segmentos li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--verde);
    transform: translateY(-2px);
}

.segmentos li:hover {
    background: var(--branco);
}

@media (min-width: 560px) {
    .segmentos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .segmentos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.nota {
    margin-top: 18px;
    font-size: .9375rem;
    color: var(--tinta-3);
}

/* 7.4 Sobre (home) */

.sobre {
    display: grid;
    gap: clamp(36px, 6vw, 88px);
    align-items: center;
}

.sobre__num {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(260px, 34vw, 440px);
}

.sobre__num::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(100%, 440px);
    aspect-ratio: 1;
    background: var(--verde);
    opacity: .3;
    -webkit-mask: url("../img/ponto.svg") center / contain no-repeat;
    mask: url("../img/ponto.svg") center / contain no-repeat;
}

.sobre__num p {
    position: relative;
    text-align: center;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.sobre__num strong {
    display: block;
    font-family: var(--serifa);
    font-size: clamp(8rem, 19vw, 15rem);
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: .86;
    text-transform: none;
    color: var(--verde-escuro);
}

.sobre .texto {
    margin-top: 22px;
    max-width: 36em;
}

.sobre .link {
    margin-top: 28px;
}

@media (min-width: 900px) {
    .sobre {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    }
}

.citacao {
    margin-top: 32px;
    padding-left: 22px;
    border-left: 3px solid var(--verde);
    font-family: var(--serifa);
    font-size: clamp(1.375rem, 2.1vw, 1.75rem);
    font-style: italic;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--tinta);
    max-width: 24em;
    text-wrap: balance;
}

/* pilares: três palavras fortes entre fios, separadas por pontos */
.pilares {
    display: grid;
    gap: 6px;
    margin-top: clamp(40px, 6vw, 80px);
    padding-block: clamp(22px, 3vw, 36px);
    border-block: 1px solid var(--tinta);
    font-family: var(--serifa);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-style: italic;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.pilares li {
    display: flex;
    align-items: center;
    gap: .45em;
}

.pilares li::before {
    content: "";
    flex: none;
    width: .2em;
    height: .2em;
    background: var(--verde);
}

@media (min-width: 900px) {
    .pilares {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    .pilares li:first-child::before {
        display: none;
    }

    .pilares li {
        flex: 1 1 auto;
        justify-content: space-between;
    }

    .pilares li:first-child {
        flex: 0 0 auto;
    }

    .pilares li::before {
        margin-inline: auto;
    }
}

.duas > .pilares {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* missão e visão */
.principios {
    position: relative;
    display: grid;
}

.principio {
    padding-block: clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--fio-claro);
}

.principio .chapeu {
    margin-bottom: 18px;
}

.principio p:last-child {
    font-family: var(--serifa);
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 1.24;
    letter-spacing: -.015em;
    text-wrap: pretty;
}

@media (min-width: 860px) {
    .principios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .principio {
        padding-right: clamp(28px, 4vw, 64px);
    }

    .principio + .principio {
        padding-left: clamp(28px, 4vw, 64px);
        padding-right: 0;
        border-left: 1px solid var(--fio-claro);
    }
}

/* 7.5 Lista de matérias (artigos) */

.materias {
    display: grid;
    border-top: 2px solid var(--tinta);
}

.materia {
    display: flex;
    flex-direction: column;
    padding: 28px 0 32px;
    border-bottom: 1px solid var(--fio);
}

.materia__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 16px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.materia__meta span + span::before {
    content: "·";
    margin-right: 14px;
}

.materia h2,
.materia h3 {
    font-size: clamp(1.375rem, 1.9vw, 1.625rem);
    line-height: 1.14;
    margin-bottom: 14px;
}

.materia h2 a,
.materia h3 a {
    background: linear-gradient(var(--verde), var(--verde)) left 92% / 0 2px no-repeat;
    transition: background-size .35s var(--ease);
}

.materia:hover h2 a,
.materia:hover h3 a {
    background-size: 100% 2px;
}

.materia__resumo {
    font-size: .9875rem;
    line-height: 1.55;
    color: var(--tinta-2);
    margin-bottom: 22px;
}

.materia .link {
    margin-top: auto;
    align-self: flex-start;
    font-size: .9375rem;
}

@media (min-width: 860px) {
    .materias--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .materias--3 .materia {
        padding: 30px 30px 34px;
        border-bottom: 0;
        border-left: 1px solid var(--fio);
    }

    .materias--3 .materia:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .materias--3 .materia:last-child {
        padding-right: 0;
    }
}

/* 7.6 Chamada final */

.chamada {
    position: relative;
    overflow: hidden;
    background: var(--verde);
    color: var(--tinta);
    padding-block: clamp(56px, 7.5vw, 104px);
}

.chamada__ret {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(55%, 700px);
    background: var(--verde-escuro);
    opacity: .24;
    -webkit-mask: url("../img/reticula.svg") center / 100% 100% no-repeat;
    mask: url("../img/reticula.svg") center / 100% 100% no-repeat;
    pointer-events: none;
}

.chamada__in {
    position: relative;
    display: grid;
    gap: 32px;
    align-items: end;
}

.chamada .chapeu {
    color: var(--verde-noite);
}

.chamada .chapeu::before {
    background: var(--tinta);
}

.chamada .t-2 em {
    color: var(--verde-noite);
}

.chamada .pt {
    color: var(--papel);
}

.chamada p.lead {
    margin-top: 18px;
    color: var(--verde-noite);
    max-width: 32em;
}

.chamada__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.chamada .btn--linha {
    background: var(--verde);
}

@media (min-width: 960px) {
    .chamada__in {
        grid-template-columns: minmax(0, 1.25fr) auto;
        gap: 64px;
    }

    .chamada__acoes {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 8. Capas das páginas internas ------------------------------------------- */

.capa {
    position: relative;
    overflow: hidden;
    padding-block: clamp(40px, 6vw, 84px) clamp(40px, 5.5vw, 76px);
    border-bottom: 1px solid var(--tinta);
}

.capa__ponto {
    position: absolute;
    right: -120px;
    top: -140px;
    width: min(54vw, 620px);
    aspect-ratio: 1;
    background: var(--verde);
    opacity: .2;
    -webkit-mask: url("../img/ponto.svg") center / contain no-repeat;
    mask: url("../img/ponto.svg") center / contain no-repeat;
    transform: scaleX(-1) rotate(-18deg);
    pointer-events: none;
}

.capa .container {
    position: relative;
}

.trilha {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(28px, 4vw, 48px);
    font-size: .8125rem;
    color: var(--tinta-3);
}

.trilha a:hover {
    color: var(--verde-texto);
}

.trilha li + li::before {
    content: "/";
    margin-right: 8px;
    opacity: .5;
}

.capa .t-1 {
    max-width: 15em;
}

.capa .lead {
    margin-top: 24px;
}

/* 9. Serviços -------------------------------------------------------------- */

.passos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
}

.passos a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: var(--branco);
    border: 1px solid rgba(17, 26, 21, .26);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .25s, color .25s, border-color .25s;
}

.passos a span {
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--verde-texto);
    transition: color .25s;
}

.passos a:hover {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--papel);
}

.passos a:hover span {
    color: var(--verde-vivo);
}

.servico {
    display: grid;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(48px, 7vw, 96px);
    border-bottom: 1px solid var(--fio);
}

.servico:first-child {
    padding-top: 0;
}

.servico:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.servico__n {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--verde-texto);
}

.servico__n::after {
    content: "";
    width: 48px;
    height: 1px;
    background: currentColor;
}

.servico .texto {
    margin-top: 22px;
    max-width: 34em;
}

.resultado {
    display: flex;
    gap: 14px;
    margin-top: 28px;
    padding: 18px 20px;
    background: var(--verde-claro);
    font-size: .9875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--verde-noite);
    max-width: 34em;
}

.resultado .icone {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--verde-texto);
    stroke-width: 2.2;
}

@media (min-width: 960px) {
    .servico {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .servico:nth-child(even) .servico__fig {
        order: -1;
    }
}

/* figuras ilustrativas de cada etapa */
.figura {
    container-type: inline-size;
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(320px, 38vw, 460px);
    padding: clamp(20px, 4vw, 44px);
    background: var(--papel-2);
    border: 1px solid var(--fio);
    overflow: hidden;
}

.figura::before {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 330px;
    aspect-ratio: 1;
    background: var(--verde);
    opacity: .22;
    -webkit-mask: url("../img/ponto.svg") center / contain no-repeat;
    mask: url("../img/ponto.svg") center / contain no-repeat;
    transform: scaleX(-1);
}

.figura > * {
    position: relative;
}

.papel {
    width: min(100%, 400px);
    background: #fffefb;
    box-shadow: var(--contorno), 8px 8px 0 rgba(17, 26, 21, .1);
}

/* 9.1 Ficha de negociação (com pontilhado de sumário) */
.ficha {
    padding: 26px 26px 22px;
    transform: rotate(-1.2deg);
}

.ficha__titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 3px double var(--tinta);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ficha__titulo span {
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--tinta-3);
}

.ficha dl > div {
    display: flex;
    align-items: baseline;
    padding: 8px 0;
    font-size: .875rem;
    line-height: 1.3;
}

.ficha dt {
    flex: 1;
    display: flex;
    align-items: baseline;
    color: var(--tinta-3);
    min-width: 5.5em;
}

.ficha dt::after {
    content: "";
    flex: 1;
    min-width: 16px;
    margin: 0 8px;
    border-bottom: 2px dotted rgba(17, 26, 21, .32);
    transform: translateY(-3px);
}

.ficha dd {
    font-weight: 600;
    text-align: right;
}

.ficha__ok {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--verde-claro);
    color: var(--verde-noite);
    font-size: .8125rem;
    font-weight: 600;
}

.ficha__ok .icone {
    width: 18px;
    height: 18px;
    padding: 3px;
    background: var(--verde);
    color: var(--tinta);
    stroke-width: 2.8;
}

/* 9.2 Página diagramada */
.pagina {
    font-size: 10px;
    font-size: clamp(7px, 2.5cqi, 10px);
    width: 38em;
    max-width: 100%;
    padding: 2em 2.2em 0;
    height: 34em;
    overflow: hidden;
    transform: rotate(1.2deg);
    display: flex;
    flex-direction: column;
}

.pagina .folha__grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "a d d c" "a b b c";
    column-gap: 1.5em;
    row-gap: 3.2em;
    padding-top: 1.8em;
}

.pagina .folha__col--a,
.pagina .folha__col--c {
    padding: 0;
    margin: 0;
    border: 0;
}

.pagina .folha__col--a {
    padding-right: 1.3em;
}

.pagina .destaque {
    padding: 1.4em 1.3em;
    min-height: 13em;
    display: grid;
    gap: 1em;
    align-content: start;
}

.pagina .destaque .gr-t {
    width: 62%;
    margin-inline: auto;
    height: .7em;
}

.pagina .destaque .gr {
    --h: .26em;
}

.pagina .destaque .gr::after {
    background: #fff;
}

/* 9.3 Prova de revisão */
.prova {
    display: grid;
    gap: 18px;
    width: min(100%, 440px);
}

.prova__texto {
    padding: 22px 22px 20px;
    transform: rotate(-1deg);
}

.prova .edital {
    font-size: .6875rem;
    line-height: 1.5;
}

.prova__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prova__lista li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 8px;
    background: var(--branco);
    border: 1px solid var(--fio);
    font-size: .8125rem;
    font-weight: 600;
}

.prova__lista .icone {
    width: 18px;
    height: 18px;
    padding: 3px;
    background: var(--verde);
    color: var(--tinta);
    stroke-width: 2.8;
}

/* 9.4 Recorte publicado */
.recorte-wrap {
    position: relative;
    width: min(100%, 380px);
    margin-top: 36px;
}

.recorte {
    padding: 18px 22px 34px;
    transform: rotate(1.4deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 100%, 92% 96%, 88% 100%, 84% 96%, 80% 100%, 76% 96%, 72% 100%, 68% 96%, 64% 100%, 60% 96%, 56% 100%, 52% 96%, 48% 100%, 44% 96%, 40% 100%, 36% 96%, 32% 100%, 28% 96%, 24% 100%, 20% 96%, 16% 100%, 12% 96%, 8% 100%, 4% 96%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 100%, 92% 96%, 88% 100%, 84% 96%, 80% 100%, 76% 96%, 72% 100%, 68% 96%, 64% 100%, 60% 96%, 56% 100%, 52% 96%, 48% 100%, 44% 96%, 40% 100%, 36% 96%, 32% 100%, 28% 96%, 24% 100%, 20% 96%, 16% 100%, 12% 96%, 8% 100%, 4% 96%, 0 100%);
    box-shadow: none;
}

/* a sombra seca acompanha o serrilhado; fica num invólucro só do papel
   para não duplicar o carimbo nem o selo */
.recorte-sombra {
    filter: drop-shadow(8px 8px 0 rgba(17, 26, 21, .12));
}

.recorte .folha__topo {
    font-size: .625rem;
    padding-bottom: 9px;
    margin-bottom: 14px;
    border-bottom-width: 3px;
}

.recorte .edital {
    font-size: .6875rem;
    line-height: 1.5;
}

.recorte-wrap .carimbo {
    right: -34px;
    top: auto;
    bottom: 6px;
    width: 150px;
    height: 150px;
}

.recorte-wrap .selo {
    left: -14px;
    top: -46px;
}

/* 10. Publicidades legais -------------------------------------------------- */

/* dois veículos lado a lado */
.veiculos {
    display: grid;
    gap: 20px;
}

.veiculo {
    padding: clamp(24px, 3vw, 36px);
    background: var(--branco);
    border: 1px solid var(--fio);
    border-top: 3px solid var(--tinta);
}

.veiculo__tipo {
    display: block;
    margin-bottom: 14px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--verde-texto);
}

.veiculo h3 {
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    margin-bottom: 14px;
}

.veiculo p {
    color: var(--tinta-2);
    font-size: .9875rem;
}

.veiculos__nota {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px dashed rgba(17, 26, 21, .32);
    font-weight: 500;
    color: var(--tinta-2);
}

.veiculos__nota::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--verde);
}

@media (min-width: 800px) {
    .veiculos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .veiculos__nota {
        grid-column: 1 / -1;
    }
}

/* guia da Lei 6.404/76 */
.guia {
    margin-top: clamp(32px, 4vw, 52px);
}

.abas {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 2px solid var(--tinta);
}

@media (max-width: 820px) {
    .abas {
        margin-inline: calc(var(--margem) * -1);
        padding-inline: var(--margem);
    }
}

.abas::-webkit-scrollbar {
    display: none;
}

.abas button {
    flex: none;
    padding: 14px 20px 13px;
    border: 0;
    background: transparent;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--tinta-2);
    transition: background-color .2s, color .2s;
}

.abas button:hover {
    background: var(--papel-3);
}

.abas button[aria-selected="true"] {
    background: var(--tinta);
    color: var(--papel);
}

/* sem JS as abas não aparecem e todos os painéis ficam visíveis em sequência */
html:not(.js) .abas {
    display: none;
}

.painel {
    padding-top: 8px;
}

.painel[hidden] {
    display: none;
}

.painel__grupo {
    margin-top: 28px;
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.tabela {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: .9375rem;
    line-height: 1.45;
}

.tabela th {
    padding: 14px 16px 12px 0;
    border-bottom: 1px solid var(--tinta);
    text-align: left;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-3);
    white-space: nowrap;
}

.tabela td {
    padding: 18px 20px 18px 0;
    border-bottom: 1px solid var(--fio);
    vertical-align: top;
}

.tabela tr > :last-child {
    padding-right: 0;
}

.tabela th:nth-child(1) {
    width: 43%;
}

.tabela th:nth-child(2) {
    width: 21%;
}

.tabela th:nth-child(3) {
    width: 13%;
}

.tabela td strong {
    display: block;
    font-family: var(--serifa);
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 4px;
}

.tabela td span {
    color: var(--tinta-2);
    font-size: .9rem;
}

.lei {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid rgba(17, 26, 21, .28);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--branco);
}

.tabela .vezes {
    font-weight: 600;
}

.tabela .quando {
    color: var(--tinta-2);
}

@media (max-width: 820px) {
    .tabela thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .tabela,
    .tabela tbody,
    .tabela tr,
    .tabela td {
        display: block;
        width: auto;
    }

    .tabela tr {
        padding: 20px 0;
        border-bottom: 1px solid var(--fio);
    }

    .tabela td {
        padding: 0;
        border: 0;
    }

    .tabela td + td {
        display: grid;
        grid-template-columns: 7.2em minmax(0, 1fr);
        gap: 12px;
        align-items: baseline;
        margin-top: 10px;
    }

    .tabela td + td::before {
        content: attr(data-rotulo);
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--tinta-3);
    }

    .lei {
        white-space: normal;
        justify-self: start;
    }
}

.aviso {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding: 20px 22px;
    background: var(--papel-2);
    border-left: 3px solid var(--verde);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--tinta-2);
}

.aviso strong {
    color: var(--tinta);
}

/* perguntas frequentes */
.faq {
    border-top: 2px solid var(--tinta);
}

.faq details {
    border-bottom: 1px solid var(--fio);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--serifa);
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.2;
    transition: color .2s;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary:hover {
    color: var(--verde-texto);
}

.faq summary::after {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(17, 26, 21, .3);
    background:
        linear-gradient(var(--tinta), var(--tinta)) center / 12px 1.5px no-repeat,
        linear-gradient(var(--tinta), var(--tinta)) center / 1.5px 12px no-repeat;
    transition: background-size .3s var(--ease), background-color .2s, border-color .2s;
}

/* aberta: o "+" vira "–" (a haste vertical some) */
.faq details[open] summary::after {
    background-size: 12px 1.5px, 1.5px 0;
    background-color: var(--verde);
    border-color: var(--verde);
}

.faq__r {
    padding: 0 58px 26px 0;
    max-width: 46em;
    color: var(--tinta-2);
}

.faq__r .link {
    margin-top: 14px;
    font-size: .9375rem;
    color: var(--tinta);
}

/* 11. Artigos -------------------------------------------------------------- */

.materias--lista .materia {
    display: grid;
    gap: 6px 48px;
    padding: 34px 0 38px;
}

.materias--lista .materia h2 {
    font-size: clamp(1.625rem, 3vw, 2.375rem);
    line-height: 1.08;
    margin-bottom: 0;
}

.materias--lista .materia__resumo {
    margin-bottom: 18px;
    max-width: 40em;
}

.materia__n {
    font-family: var(--serifa);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    font-style: italic;
    line-height: .9;
    color: var(--verde);
}

@media (min-width: 900px) {
    .materias--lista .materia {
        grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, .9fr);
        align-items: start;
    }

    .materias--lista .materia__meta {
        grid-column: 2;
        margin-bottom: 8px;
    }

    .materias--lista .materia__n {
        grid-row: 1 / span 2;
    }

    .materias--lista .materia h2 {
        grid-column: 2;
    }

    .materias--lista .materia__lado {
        grid-column: 3;
        grid-row: 1 / span 2;
        padding-top: 4px;
    }
}

.artigo {
    max-width: 760px;
    margin-inline: auto;
}

.artigo__cab {
    padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 44px);
    border-bottom: 1px solid var(--tinta);
}

.artigo__cab .t-1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    margin-bottom: 26px;
}

.artigo__corpo {
    padding-block: clamp(32px, 5vw, 56px);
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.72;
    color: var(--tinta-2);
}

.artigo__corpo p {
    text-wrap: pretty;
}

.artigo__corpo p + p {
    margin-top: 1.25em;
}

/* capitular, como na abertura de uma matéria */
.artigo__corpo p:first-child::first-letter {
    float: left;
    margin: .06em .1em 0 0;
    font-family: var(--serifa);
    font-size: 4.3em;
    font-weight: 500;
    line-height: .8;
    color: var(--verde-texto);
}

.artigo__fim {
    display: grid;
    gap: 20px;
    padding: clamp(24px, 4vw, 40px);
    background: var(--verde-escuro);
    color: var(--papel);
}

.artigo__fim h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.artigo__fim p {
    color: rgba(245, 242, 234, .76);
}

.artigo__fim div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 12. Contato -------------------------------------------------------------- */

.contato {
    display: grid;
    gap: clamp(36px, 6vw, 80px);
}

@media (min-width: 980px) {
    .contato {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        align-items: start;
    }
}

.form {
    display: grid;
    gap: 20px;
    padding: clamp(22px, 3.4vw, 40px);
    background: var(--branco);
    border: 1px solid var(--fio);
    border-top: 3px solid var(--tinta);
}

.form__linha {
    display: grid;
    gap: 20px;
}

@media (min-width: 640px) {
    .form__linha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.campo {
    display: grid;
    gap: 8px;
    align-content: start;
}

.campo label {
    font-size: .875rem;
    font-weight: 600;
}

.campo label small {
    font-weight: 400;
    font-size: inherit;
    color: var(--tinta-3);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid rgba(17, 26, 21, .28);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color .2s, box-shadow .2s;
}

.campo select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23111a15' stroke-width='1.8'%3E%3Cpath d='m1.5 1.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.campo textarea {
    min-height: 150px;
    resize: vertical;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
    border-color: rgba(17, 26, 21, .55);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: 0;
    border-color: var(--verde-texto);
    box-shadow: 0 0 0 4px rgba(0, 168, 90, .2);
}

.campo--erro input,
.campo--erro select,
.campo--erro textarea {
    border-color: var(--erro);
}

.campo__erro {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--erro);
}

/* campo-isca contra robôs: fora da tela, mas presente no HTML */
.campo--isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__fim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: 4px;
}

.form__fim p {
    flex: 1;
    min-width: 220px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--tinta-3);
}

.alerta {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    font-size: .9875rem;
    line-height: 1.5;
}

.alerta strong {
    display: block;
}

.alerta .icone {
    width: 24px;
    height: 24px;
    margin-top: 1px;
}

.alerta--ok {
    background: var(--verde-claro);
    color: var(--verde-noite);
}

.alerta--ok .icone {
    padding: 4px;
    background: var(--verde);
    color: var(--tinta);
    stroke-width: 2.6;
}

.alerta--erro {
    background: #f6dfdb;
    color: #5c130d;
}

.alerta a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.canais {
    border-top: 2px solid var(--tinta);
}

.canais li {
    border-bottom: 1px solid var(--fio);
}

.canal {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 20px 0;
    transition: color .2s;
}

.canal > .icone:first-child {
    width: 44px;
    height: 44px;
    padding: 11px;
    background: var(--verde-claro);
    color: var(--verde-texto);
    transition: background-color .25s, color .25s;
}

.canal small {
    display: block;
    margin-bottom: 2px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.canal strong {
    display: block;
    font-family: var(--serifa);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.canal strong.canal__p {
    text-wrap: balance;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.45;
}

.canal__seta {
    width: 20px;
    height: 20px;
    color: var(--tinta-3);
    transition: transform .3s var(--ease), color .2s;
}

a.canal:hover > .icone:first-child,
.canal:has(a:hover) > .icone:first-child {
    background: var(--verde);
    color: var(--tinta);
}

a.canal:hover .canal__seta {
    transform: translate(3px, -3px);
    color: var(--verde-texto);
}

.mapa {
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--fio);
    background: var(--papel-2);
}

.mapa iframe {
    width: 100%;
    height: 300px;
    border: 0;
    filter: grayscale(1) contrast(1.05);
    transition: filter .4s;
}

.mapa:hover iframe {
    filter: none;
}

/* 13. Rodapé --------------------------------------------------------------- */

.rodape {
    background: var(--tinta);
    color: rgba(245, 242, 234, .68);
    font-size: .9375rem;
    padding-top: clamp(56px, 7vw, 88px);
}

.rodape__grade {
    display: grid;
    gap: 40px 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: clamp(40px, 6vw, 72px);
}

.rodape__marca {
    grid-column: 1 / -1;
    max-width: 30em;
}

.rodape__marca img {
    width: 170px;
    margin-bottom: 22px;
}

.rodape__titulo {
    margin-bottom: 18px;
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--papel);
}

.rodape li + li {
    margin-top: 10px;
}

.rodape a {
    transition: color .2s;
}

.rodape a:hover {
    color: var(--verde-vivo);
}

.rodape__grade > :last-child {
    grid-column: 1 / -1;
}

.rodape__contato a {
    display: flex;
    gap: 12px;
    line-height: 1.45;
}

.rodape__contato .icone {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--verde-vivo);
}

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    padding-block: 24px 28px;
    border-top: 1px solid var(--fio-claro);
    font-size: .8125rem;
}

.rodape__subir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rodape__subir .icone {
    width: 14px;
    height: 14px;
    transform: rotate(-45deg);
}

@media (min-width: 900px) {
    .rodape__grade {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, .8fr) minmax(0, 1.25fr);
        gap: 48px;
    }

    .rodape__marca,
    .rodape__grade > :last-child {
        grid-column: auto;
    }
}

/* botão flutuante do WhatsApp */
.zap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    background: var(--verde);
    color: #fff;
    /* anel da cor do papel: destaca o botão sobre as faixas verde e escura */
    box-shadow: 0 0 0 2px var(--papel);
    transition: transform .3s var(--ease), background-color .25s;
}

.zap .icone {
    width: 28px;
    height: 28px;
}

.zap:hover {
    transform: scale(1.08);
    background: var(--verde-vivo);
}

html.menu-aberto .zap {
    display: none;
}

/* página 404 */
.erro404 {
    text-align: center;
    padding-block: clamp(72px, 12vw, 160px);
}

.erro404 .chapeu {
    justify-content: center;
}

.erro404 .lead {
    margin: 24px auto 34px;
}

.erro404 .hero__acoes {
    margin-top: 0;
}

/* 14. Movimento e impressão ------------------------------------------------ */

.js [data-revela] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-revela].visivel {
    opacity: 1;
    transform: none;
}

.js .vitrine .folha {
    animation: folha-entra .9s var(--ease) .1s both;
}

.js .vitrine .folha--fundo {
    animation-name: folha-fundo-entra;
    animation-delay: 0s;
}

.js .vitrine-wrap .carimbo,
.js .recorte-wrap.visivel .carimbo {
    animation: carimbar .5s cubic-bezier(.3, 1.5, .5, 1) 1s both;
}

.js .recorte-wrap:not(.visivel) .carimbo {
    opacity: 0;
}

.js .recorte-wrap.visivel .carimbo {
    animation-delay: .5s;
}

.js .vitrine-wrap .selo {
    animation: selo-entra .7s var(--ease) both;
}

.js .vitrine-wrap .selo--1 {
    animation-delay: .7s;
}

.js .vitrine-wrap .selo--2 {
    animation-delay: 1.35s;
}

@keyframes folha-entra {
    from {
        opacity: 0;
        transform: translateY(28px) rotate(0deg);
    }
}

@keyframes folha-fundo-entra {
    from {
        opacity: 0;
        transform: translateY(28px) rotate(0deg);
    }
}

@keyframes carimbar {
    0% {
        opacity: 0;
        transform: rotate(-13deg) scale(1.9);
    }

    100% {
        opacity: .9;
        transform: rotate(-13deg) scale(1);
    }
}

@keyframes selo-entra {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .js [data-revela],
    .js .recorte-wrap:not(.visivel) .carimbo {
        opacity: 1;
        transform: none;
    }

    .js .recorte-wrap .carimbo,
    .carimbo {
        opacity: .9;
    }
}

@media print {
    .topo,
    .cab,
    .zap,
    .chamada,
    .rodape,
    .hero__ponto,
    .capa__ponto {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .js [data-revela] {
        opacity: 1;
        transform: none;
    }

    .secao {
        padding-block: 24pt;
    }

    .painel[hidden] {
        display: block;
    }
}