/* Galeria "O que a gente faz" (aprovada) */
  /* =========================================================
     SEÇÃO: O QUE A GENTE FAZ
     ========================================================= */
  .fazemos {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 120px) clamp(20px, 4vw, 40px);
  }
  .fazemos-topo { margin-bottom: clamp(28px, 4vw, 48px); max-width: 640px; }
  .fazemos-topo .selo { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
  .fazemos-topo h2 {
    margin-top: 14px;
    font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 700;
    text-wrap: balance;
  }
  .fazemos-topo p { margin-top: 14px; color: var(--cinza); font-size: 1.125rem; max-width: 30em; }

  /* ---------- Galeria ---------- */
  .galeria {
    display: flex;
    gap: 10px;
    height: clamp(540px, 72vh, 660px);
  }
  .painel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--linha);
    border-radius: 18px;
    background: var(--painel);
    transition: flex-grow .75s var(--curva), border-color .3s, background-color .45s ease;
  }
  .painel.aberto { flex-grow: 3.6; border-color: var(--linha-forte); }

  /* gatilho cobre o painel fechado; aberto, deixa passar o clique pro link */
  .gatilho {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .painel.aberto .gatilho { pointer-events: none; }

  .num {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 3;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8125rem;
    letter-spacing: .02em;
    color: var(--cinza);
  }
  .rotulo {
    position: absolute;
    left: 18px;
    bottom: 22px;
    z-index: 3;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: clamp(1.15rem, .9rem + .7vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -.015em;
    opacity: 1;
    transition: opacity .3s;
  }
  .painel.aberto .rotulo { opacity: 0; }

  /* arte: ocupa só a faixa de cima, sempre com folga do texto (--h = altura do texto) */
  .arte {
    position: absolute;
    left: 0; right: 0;
    top: 46px;
    bottom: calc(var(--h, 240px) + 28px);
    z-index: 1;
    overflow: hidden;
    transition: opacity .4s ease;
  }
  .arte svg, .arte img, .arte iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    opacity: .24;
    transform: scale(2.3);
    transition: opacity .6s ease, transform .9s var(--curva);
  }
  .arte img { object-fit: cover; }
  .painel.aberto .arte svg, .painel.aberto .arte img, .painel.aberto .arte iframe { opacity: 1; transform: scale(1); }

  /* conteúdo do painel aberto */
  .conteudo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 0 clamp(20px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px);
    opacity: 0;
    transform: translateY(14px);
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
  }
  .painel.aberto .conteudo {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .55s ease .25s, transform .6s var(--curva) .25s, visibility 0s 0s;
  }
  .conteudo h3 {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 700;
    text-wrap: balance;
  }
  .frase { margin-top: 10px; color: var(--cinza); font-size: 1.0625rem; max-width: 30em; }
  .tags { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .tags li {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--cinza);
  }
  .tags li::before { content: "\2734\FE0E\00a0"; color: var(--tinta); }
  .premium {
    margin-top: 14px;
    max-width: 34em;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--cinza);
    border: 1px dashed var(--linha-forte);
    border-radius: 12px;
    padding: 10px 14px;
  }
  .premium b { color: var(--tinta); font-weight: 700; }
  .ver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--tinta);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid var(--tinta);
    padding-bottom: 2px;
  }
  .ver svg { width: 14px; height: 14px; transition: transform .25s; }
  .ver:hover svg { transform: translate(2px, -2px); }

  /* entrada suave ao aparecer na tela */
  .js .painel { opacity: 0; transform: translateY(22px); }
  .js .painel.visivel {
    opacity: 1;
    transform: none;
    transition: flex-grow .75s var(--curva), border-color .3s, background-color .45s ease,
                opacity .7s ease var(--atraso, 0s), transform .8s var(--curva) var(--atraso, 0s);
  }

  /* ---------- Celular e telas estreitas: vira pilha que abre ---------- */
  @media (max-width: 780px) {
    .galeria { flex-direction: column; height: auto; gap: 8px; }
    .painel { flex: none; height: 74px; transition: height .65s var(--curva), border-color .3s; }
    .painel.aberto { height: calc(var(--h, 240px) + 250px); }
    .painel:not(.aberto) .arte { opacity: 0; }
    .js .painel.visivel { transition: height .65s var(--curva), border-color .3s,
                opacity .7s ease var(--atraso, 0s), transform .8s var(--curva) var(--atraso, 0s); }
    .num { top: 26px; }
    .rotulo {
      writing-mode: horizontal-tb;
      transform: none;
      left: 56px;
      bottom: auto;
      top: 20px;
      font-size: 1.25rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .painel { opacity: 1; transform: none; }
  }