/* ═══════════════════════════════════════════════════════════════════════════
   Home — a camada visual por cima da identidade Protocolo (21/09/2026).

   `landing.css` continua sendo a identidade: cores, tipos, botões, carimbo,
   formulário. Esta folha só existe na home e desenha o que a home tem a mais —
   a cena do hero, o letreiro, o bento dos pilares, a janela do sistema, as
   telas dos produtos e a revelação ao rolar.

   ⚠️ A regra de cor da identidade vale aqui sem exceção: verde é marca, quente
   é estado. O ocre só aparece nos carimbos de prazo, que são prazo de verdade
   (a ciência do DJE, um pedido em separação). Nada de ocre em brilho, borda ou
   fundo.

   ⚠️ Tudo o que se mexe respeita `prefers-reduced-motion`: cartão flutuando,
   letreiro, pulso, revelação. Quem pediu menos movimento vê a página parada e
   INTEIRA — nunca escondida à espera de uma animação que não vai rodar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero em duas colunas ─────────────────────────────────────────────────── */
.hero-cena {
    align-items: center;
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 680px;
    padding-block: 72px 64px;
}

/* A marca d'água do hero antigo sairia por baixo da cena — aqui a cena É a imagem. */
.hero-cena::after {
    display: none;
}

.hero-texto {
    max-width: 560px;
    position: relative;
    z-index: 1;
}

.hero-texto h1 {
    font-size: clamp(36px, 3.9vw, 54px);
}

.hero-provas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    margin-top: 36px;
}

.hero-provas li {
    align-items: center;
    color: rgba(241, 242, 238, .78);
    display: flex;
    font-size: 14px;
    gap: 9px;
}

.hero-prova-ponto {
    background: var(--idb-carimbo-claro);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(92, 183, 149, .18);
    height: 7px;
    width: 7px;
}

/* ── A cena ───────────────────────────────────────────────────────────────── */
.cena {
    aspect-ratio: 1 / 1;
    position: relative;
    width: 100%;
}

/* Luz difusa atrás dos cartões — dois focos de verde sobre a tinta. É o único
   "fundo bonito" da página, e é verde porque é a marca. */
.cena-brilho {
    background:
        radial-gradient(closest-side, rgba(92, 183, 149, .38), transparent 70%) 30% 35% / 70% 70% no-repeat,
        radial-gradient(closest-side, rgba(11, 107, 79, .55), transparent 70%) 75% 75% / 80% 80% no-repeat;
    filter: blur(22px);
    inset: 0;
    position: absolute;
}

/* Grade fina de papel milimetrado, esmaecendo nas bordas: o hero antigo tinha
   o símbolo a 5%; esta é a textura que ficou no lugar dele. */
.cena-grade {
    background-image:
        linear-gradient(var(--idb-linha-clara-fina) 1px, transparent 1px),
        linear-gradient(90deg, var(--idb-linha-clara-fina) 1px, transparent 1px);
    background-size: 36px 36px;
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
    position: absolute;
}

.cena-cartao {
    background: var(--idb-superficie);
    border: 1px solid rgba(18, 33, 31, .08);
    border-radius: 6px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(255, 255, 255, .04);
    color: var(--idb-tinta);
    padding: 18px 20px;
    position: absolute;
    width: min(360px, 78%);
}

.cena-cartao-nota {
    animation: flutuar 7s ease-in-out infinite;
    left: 0;
    top: 0;
    width: min(340px, 64%);
    z-index: 2;
}

.cena-cartao-dje {
    animation: flutuar 8.5s ease-in-out -2s infinite;
    right: 0;
    top: 44%;
    width: min(290px, 54%);
    z-index: 1;
}

.cena-cartao-projeto {
    animation: flutuar 9s ease-in-out -4.5s infinite;
    bottom: 0;
    left: 0;
    width: min(240px, 44%);
    z-index: 3;
}

/* Sem o DJE o segundo lugar fica vazio — o cartão do projeto sobe para ele. */
.cena-cartao-nota + .cena-cartao-projeto {
    bottom: auto;
    left: auto;
    right: 0;
    top: 50%;
    width: min(300px, 56%);
}

@keyframes flutuar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.cena-cartao-topo {
    align-items: center;
    border-bottom: 1px solid var(--idb-linha-fina);
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.cena-app {
    align-items: center;
    color: var(--idb-tinta-70);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cena-app img {
    background: var(--idb-tinta);
    border-radius: 4px;
    height: 20px;
    padding: 3px;
    width: 20px;
}

.cena-hora,
.cena-chave,
.cena-anexos {
    color: var(--idb-tinta-45);
    font-family: var(--idb-font-dado);
    font-size: 12px;
}

.cena-titulo {
    font-family: var(--idb-font-titulo);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin-bottom: 10px;
}

.cena-linha {
    display: flex;
    font-size: 13px;
    gap: 12px;
    justify-content: space-between;
    line-height: 1.9;
}

.cena-linha span {
    color: var(--idb-tinta-45);
}

.cena-chave {
    letter-spacing: .02em;
    margin-top: 8px;
    word-break: break-all;
}

.cena-cartao-rodape {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 14px;
}

.cena-acao {
    color: var(--idb-carimbo);
    font-size: 13px;
    font-weight: 600;
}

.cena-passos {
    display: grid;
    gap: 9px;
    list-style: none;
}

.cena-passos li {
    align-items: center;
    color: var(--idb-tinta-45);
    display: flex;
    font-size: 13px;
    gap: 10px;
}

.cena-passos li::before {
    border: 1.5px solid currentColor;
    border-radius: 50%;
    content: "";
    flex: none;
    height: 14px;
    width: 14px;
}

.cena-passos .feito {
    color: var(--idb-tinta);
}

.cena-passos .feito::before {
    background: var(--idb-carimbo);
    border-color: var(--idb-carimbo);
    /* O "visto" desenhado na própria bolinha, sem ícone. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cena-passos .andando {
    color: var(--idb-tinta);
    font-weight: 600;
}

.cena-passos .andando::before {
    animation: pulsar 1.8s ease-in-out infinite;
    border-color: var(--idb-carimbo);
    box-shadow: 0 0 0 3px var(--idb-carimbo-fraco);
}

@keyframes pulsar {
    0%, 100% { box-shadow: 0 0 0 3px var(--idb-carimbo-fraco); }
    50% { box-shadow: 0 0 0 7px rgba(11, 107, 79, .04); }
}

/* ── O letreiro ───────────────────────────────────────────────────────────── */
.letreiro {
    border-top: 1px solid var(--idb-linha-clara-fina);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    overflow: hidden;
    padding-block: 18px;
}

.letreiro-faixa {
    animation: correr 46s linear infinite;
    display: flex;
    gap: 0;
    width: max-content;
}

.letreiro span {
    color: rgba(241, 242, 238, .55);
    font-family: var(--idb-font-dado);
    font-size: 12px;
    letter-spacing: .12em;
    padding-inline: 28px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
}

.letreiro span::after {
    background: var(--idb-carimbo-claro);
    content: "";
    height: 4px;
    opacity: .7;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
}

@keyframes correr {
    to { transform: translateX(-50%); }
}

/* ── Os pilares, em bento ─────────────────────────────────────────────────── */
.bento {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}

.bento-item {
    background: var(--idb-superficie);
    border: 1px solid var(--idb-linha-fina);
    border-radius: 6px;
    overflow: hidden;
    padding: 0 28px 30px;
    position: relative;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.bento-item:hover {
    border-color: rgba(11, 107, 79, .35);
    box-shadow: 0 24px 50px -30px rgba(18, 33, 31, .45);
    transform: translateY(-4px);
}

.bento-item h3 {
    color: var(--idb-tinta);
    font-size: 22px;
    font-weight: 700;
    margin: 22px 0 8px;
}

.bento-item p {
    color: var(--idb-tinta-70);
    font-size: 15px;
}

.bento-figura {
    background: linear-gradient(180deg, rgba(11, 107, 79, .07), rgba(11, 107, 79, 0));
    color: var(--idb-carimbo);
    margin-inline: -28px;
}

.bento-figura svg {
    display: block;
    height: auto;
    width: 100%;
}

.fig-linhas {
    opacity: .45;
}

.fig-nos circle {
    fill: var(--idb-superficie);
    stroke: currentColor;
    stroke-width: 2;
}

.fig-centro {
    fill: currentColor;
}

.fig-pulso {
    animation: pulso-svg 2.6s ease-out infinite;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes pulso-svg {
    0% { opacity: .7; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.4); }
}

.fig-bloco {
    fill: var(--idb-superficie);
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .4s;
}

.fig-bloco-3 {
    fill: var(--idb-carimbo-fraco);
}

.bento-item:hover .fig-bloco-1 { transform: translate(-6px, -4px); }
.bento-item:hover .fig-bloco-2 { transform: translate(6px, -4px); }
.bento-item:hover .fig-bloco-3 { transform: translate(0, 5px); }

.fig-ciclo-fundo {
    opacity: .15;
}

.fig-ciclo {
    animation: girar 2.8s linear infinite;
    stroke-dasharray: 90 230;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* ── Sob medida: texto + janela do sistema ────────────────────────────────── */
.medida {
    align-items: center;
    display: grid;
    gap: 64px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.medida-texto h2 {
    font-size: clamp(30px, 3.8vw, 44px);
    letter-spacing: -.035em;
    line-height: 1.08;
    margin: 12px 0 16px;
}

.medida-texto .section-intro {
    margin-bottom: 26px;
}

/* O cartão do caminho sob medida, sem a caixa: aqui ele é parte do texto. */
.path-solta {
    border: 0;
    border-left: 2px solid var(--idb-carimbo);
    border-radius: 0;
    padding: 4px 0 4px 20px;
}

.path-solta h3 {
    font-size: 21px;
}

.trilha {
    counter-reset: etapa;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    margin-top: 30px;
}

.trilha li {
    counter-increment: etapa;
    display: grid;
    gap: 2px;
    padding-left: 34px;
    position: relative;
}

.trilha li::before {
    color: var(--idb-carimbo);
    content: counter(etapa, decimal-leading-zero);
    font-family: var(--idb-font-dado);
    font-size: 12px;
    left: 0;
    position: absolute;
    top: 3px;
}

.trilha strong {
    font-size: 15px;
    font-weight: 600;
}

.trilha span {
    color: var(--idb-tinta-70);
    font-size: 14px;
}

/* O secundário do `landing.css` foi feito para seção escura (texto papel).
   Em seção clara precisa da variante escura. */
.button-secondary-escuro {
    border-color: var(--idb-linha);
    color: var(--idb-tinta);
}

.button-secondary-escuro:hover {
    border-color: var(--idb-carimbo);
    color: var(--idb-carimbo);
}

.medida-figura {
    position: relative;
}

.janela {
    background: var(--idb-papel);
    border: 1px solid var(--idb-linha);
    border-radius: 8px;
    box-shadow: 0 40px 80px -30px rgba(18, 33, 31, .45);
    overflow: hidden;
}

.janela-barra {
    align-items: center;
    background: var(--idb-superficie);
    border-bottom: 1px solid var(--idb-linha-fina);
    display: flex;
    gap: 6px;
    padding: 10px 14px;
}

.janela-barra i {
    background: var(--idb-linha);
    border-radius: 50%;
    height: 9px;
    width: 9px;
}

.janela-barra span {
    background: var(--idb-papel);
    border-radius: 4px;
    color: var(--idb-tinta-45);
    font-family: var(--idb-font-dado);
    font-size: 11px;
    margin-left: 10px;
    padding: 3px 10px;
}

.janela-corpo {
    display: grid;
    grid-template-columns: 52px 1fr;
    min-height: 300px;
}

.janela-menu {
    background: var(--idb-tinta);
    display: grid;
    gap: 14px;
    justify-items: center;
    padding-top: 16px;
    align-content: start;
}

.janela-menu i {
    background: rgba(241, 242, 238, .18);
    border-radius: 4px;
    height: 18px;
    width: 18px;
}

.janela-menu i.ativo {
    background: var(--idb-carimbo-claro);
}

.janela-conteudo {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.janela-kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}

.janela-kpis div {
    background: var(--idb-superficie);
    border: 1px solid var(--idb-linha-fina);
    border-radius: 4px;
    display: grid;
    padding: 10px 12px;
}

.janela-kpis small {
    color: var(--idb-tinta-45);
    font-size: 11px;
}

.janela-kpis b {
    font-family: var(--idb-font-titulo);
    font-size: 24px;
    letter-spacing: -.02em;
}

.janela-kpis .alerta {
    color: var(--idb-vencido);
}

.janela-tabela {
    background: var(--idb-superficie);
    border: 1px solid var(--idb-linha-fina);
    border-radius: 4px;
    display: grid;
}

.janela-tabela .linha {
    align-items: center;
    border-bottom: 1px solid var(--idb-linha-fina);
    display: grid;
    gap: 12px;
    grid-template-columns: 1.4fr 1fr .8fr auto;
    padding: 10px 12px;
}

.janela-tabela .linha:last-child {
    border-bottom: 0;
}

.janela-tabela i {
    background: var(--idb-linha-fina);
    border-radius: 3px;
    display: block;
    height: 9px;
}

.janela-tabela .cabecalho i {
    height: 7px;
    opacity: .6;
}

.janela-tabela .carimbo {
    font-size: 10px;
    padding: 5px 8px 4px;
}

/* O aviso que "sai" da janela: o resultado do projeto, e não só a tela. */
.janela-flutuante {
    animation: flutuar 7s ease-in-out infinite;
    background: var(--idb-tinta);
    border-radius: 6px;
    bottom: -22px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
    color: var(--idb-papel);
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    position: absolute;
    right: -18px;
    width: min(280px, 80%);
}

.janela-flutuante .carimbo-ok {
    background: rgba(92, 183, 149, .14);
    color: var(--idb-carimbo-claro);
    justify-self: start;
}

.janela-flutuante p {
    font-size: 13px;
    line-height: 1.5;
}

/* ── Produtos, com a tela em cima ─────────────────────────────────────────── */
.produtos {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr 1fr;
}

.produto {
    background: rgba(241, 242, 238, .04);
    border: 1px solid var(--idb-linha-clara);
    border-radius: 8px;
    display: grid;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
}

.produto:hover {
    border-color: rgba(92, 183, 149, .5);
    transform: translateY(-4px);
}

.produto-tela {
    background:
        radial-gradient(circle at 20% 0%, rgba(92, 183, 149, .28), transparent 55%),
        rgba(241, 242, 238, .03);
    padding: 28px 28px 0;
}

.caixa {
    background: var(--idb-superficie);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 -10px 40px -20px rgba(0, 0, 0, .6);
    color: var(--idb-tinta);
    overflow: hidden;
}

.caixa-topo {
    align-items: center;
    border-bottom: 1px solid var(--idb-linha-fina);
    color: var(--idb-tinta-70);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: .04em;
    padding: 12px 16px;
    text-transform: uppercase;
}

.caixa-contador {
    background: var(--idb-carimbo);
    border-radius: 2px;
    color: #fff;
    font-family: var(--idb-font-dado);
    font-size: 10px;
    letter-spacing: .08em;
    padding: 4px 7px 3px;
}

.caixa-item {
    align-items: center;
    border-bottom: 1px solid var(--idb-linha-fina);
    display: grid;
    gap: 12px;
    grid-template-columns: auto 1fr auto;
    padding: 11px 16px;
}

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

.caixa-item i {
    background: var(--idb-linha);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.caixa-item.nova i {
    background: var(--idb-carimbo);
    box-shadow: 0 0 0 3px var(--idb-carimbo-fraco);
}

.caixa-item b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caixa-item.nova b {
    color: var(--idb-tinta);
}

.caixa-item:not(.nova) b {
    color: var(--idb-tinta-70);
    font-weight: 500;
}

.caixa-item small {
    color: var(--idb-tinta-45);
    display: block;
    font-size: 11px;
}

.caixa-item em {
    color: var(--idb-tinta-45);
    font-family: var(--idb-font-dado);
    font-size: 11px;
    font-style: normal;
}

.caixa-item em.acao {
    color: var(--idb-carimbo);
    font-family: var(--idb-font-corpo);
    font-weight: 600;
}

.caixa-item .carimbo {
    font-size: 10px;
    padding: 5px 8px 4px;
}

/* Os itens novos entram um a um, como chegam no e-mail de manhã. */
.caixa-item.nova {
    animation: chegar .6s ease-out both;
}

.caixa-item.nova:nth-child(2) { animation-delay: .2s; }
.caixa-item.nova:nth-child(3) { animation-delay: .5s; }
.caixa-item.nova:nth-child(4) { animation-delay: .8s; }

@keyframes chegar {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.produto-corpo {
    display: grid;
    padding: 28px;
}

.produto-corpo h3 {
    color: var(--idb-papel);
    font-size: 26px;
    letter-spacing: -.02em;
    margin: 10px 0 10px;
}

.produto-corpo > p {
    color: rgba(241, 242, 238, .78);
    font-size: 15px;
}

.produto-corpo .path-mark {
    color: var(--idb-carimbo-claro);
}

.produto-corpo .path-price {
    color: var(--idb-papel);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 18px 0 16px;
}

.produto-corpo .path-price span {
    color: var(--idb-carimbo-claro);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.produto-corpo .button {
    justify-self: start;
}

/* ── Três passos ──────────────────────────────────────────────────────────── */
.passos {
    border-top: 1px solid var(--idb-linha-clara-fina);
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin-top: 56px;
    padding-top: 40px;
}

.passos li {
    display: grid;
    gap: 4px;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
}

.passo-numero {
    align-items: center;
    border: 1px solid var(--idb-carimbo-claro);
    border-radius: 50%;
    color: var(--idb-carimbo-claro);
    display: flex;
    font-family: var(--idb-font-dado);
    font-size: 14px;
    grid-row: 1 / span 2;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.passos strong {
    color: var(--idb-papel);
    font-size: 16px;
    font-weight: 600;
}

.passos li > span:last-child {
    color: rgba(241, 242, 238, .7);
    font-size: 14px;
}

/* ── Contato: o brilho por trás do formulário ─────────────────────────────── */
.home #contato {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(11, 107, 79, .45), transparent 55%),
        var(--idb-tinta);
    border-top: 1px solid var(--idb-linha-clara-fina);
}

.home .form-shell {
    border-radius: 8px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}

/* ── Revelação ao rolar ───────────────────────────────────────────────────── */
/* Só age com o JavaScript de pé (`html.js`): sem ele, nada nasce invisível. */
html.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

.bento-item.reveal:nth-child(2) { transition-delay: .12s; }
.bento-item.reveal:nth-child(3) { transition-delay: .24s; }

/* ── Telas menores ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .hero-cena {
        gap: 40px;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-texto {
        max-width: 720px;
    }

    .cena {
        aspect-ratio: 5 / 4;
        margin-inline: auto;
        max-width: 560px;
    }

    .medida {
        gap: 56px;
        grid-template-columns: 1fr;
    }

    .medida-figura {
        max-width: 600px;
    }

    .janela-flutuante {
        right: 0;
    }
}

@media (max-width: 760px) {
    .bento,
    .produtos,
    .passos {
        grid-template-columns: 1fr;
    }

    .cena {
        aspect-ratio: 4 / 4.6;
    }

    .cena-cartao {
        padding: 14px 16px;
    }

    .cena-cartao-nota {
        width: 84%;
    }

    .cena-cartao-dje {
        top: 50%;
        width: 74%;
    }

    .cena-cartao-projeto {
        width: 66%;
    }

    .trilha {
        grid-template-columns: 1fr;
    }

    .produto-tela {
        padding: 20px 16px 0;
    }

    .caixa-item em {
        display: none;
    }
}

@media (max-width: 620px) {
    .hero-cena {
        padding-block: 48px 40px;
    }

    .hero-provas {
        flex-direction: column;
        gap: 8px;
    }

    .janela-flutuante {
        bottom: -16px;
        width: 88%;
    }
}

/* ── Menos movimento ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cena-cartao,
    .janela-flutuante,
    .cena-passos .andando::before,
    .fig-pulso,
    .fig-ciclo,
    .letreiro-faixa,
    .caixa-item.nova {
        animation: none;
    }

    /* ⚠️ `both` deixaria os itens presos no quadro inicial — invisíveis. */
    .caixa-item.nova {
        opacity: 1;
        transform: none;
    }

    .fig-pulso {
        opacity: 0;
    }

    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bento-item,
    .produto,
    .fig-bloco {
        transition: none;
    }
}