.dsf{
  --pap:#F6F3EE; --wt:#FFFFFF; --ouro:#B4915E; --ouro-cl:#D9C29A; --bronze:#7B5E32;
  --ease:cubic-bezier(.16,1,.3,1);
  position:relative;background:var(--pap);overflow:hidden;isolation:isolate;
}
.dsf__hd{padding:clamp(44px,6vw,84px) 0 clamp(22px,3vw,34px)}
.dsf__hd .ah-lead{max-width:58ch}

.dsf__b{
  position:relative;isolation:isolate;overflow:hidden;
  /* ⚠ ALTURA QUE ACOMPANHA A LARGURA. Com `min-height:300px` fixo, a banda
     virava uma tira cada vez mais achatada conforme a tela cresce, e como o
     fundo e `object-fit:cover` a foto era cortada junto. Medido:

       1280px -> 1270x300  ratio 4,23  corta 10% da altura
       1920px -> 1910x300  ratio 6,37  corta 40%
       2560px -> 2550x300  ratio 8,50  corta 55%

     Com o clamp o ratio para de crescer (fica perto de 4,7 de 1440 para cima),
     entao a foto e cortada sempre mais ou menos igual e a banda deixa de
     parecer um letterbox em monitor grande. O piso de 300px preserva o que ja
     estava certo em telas de ate ~1400px. */
  min-height:clamp(300px,21vw,440px);display:flex;align-items:center;
  padding:26px 0;
  background:linear-gradient(104deg,var(--d1) 0%,var(--d2) 100%);
  color:#FFFFFF;
}


/* ══ CONTRASTE ENTRE VIZINHAS ══
   Alterna profundo e claro. Duas tarjas seguidas nunca ficam no mesmo nível de
   luminosidade, mesmo quando as matizes de origem são próximas (musgo e oliva
   estavam separadas por 32° e se confundiam). */
/* ⚠ O VEU E NEUTRO, NAO E DA COR DA AREA. Antes ele saia de `--c1` quase puro
   (na variante clara, 10% de preto sobre a cor), e o resultado era uma lavagem
   de matiz por cima da fotografia: verde sobre a cena tributaria, roxo sobre a
   obra. Duotone sobre foto e o mesmo defeito que o CLAUDE.md ja mandou remover
   dos cartoes do hub, onde "a fotografia virava um borrao colorido".

   A base agora e o marinho da marca com um SOPRO da area (16% a 22%): o
   suficiente para a banda ter identidade, pouco o bastante para a foto
   continuar parecendo foto.

   ⚠ A alternancia entre vizinhas continua existindo, mas por LUMINOSIDADE e
   nao por matiz, que era o proposito original ("duas tarjas seguidas nunca no
   mesmo nivel"). Matiz separando vizinhas era o que exigia cor forte. */
.dsf__b{
  --v :color-mix(in srgb,var(--c1) 16%,#0B1424);
  --d1:color-mix(in srgb,#000000 16%,var(--v));
  --d2:color-mix(in srgb,#000000 40%,var(--v));
  --ac:#D9C29A;
}
.dsf__b--clara{
  /* ⚠ 16%/36% e nao 6%/28%. Com 6% o titulo da banda tributaria media
     4,56:1 — passa, mas sem margem nenhuma, e a foto daquela cena tem janelas
     claras. Piso apertado quebra na proxima troca de foto sem ninguem notar.
     A banda continua sendo a mais clara das duas; so deixou de ser fragil. */
  --v :color-mix(in srgb,var(--c1) 22%,#16233F);
  --d1:color-mix(in srgb,#000000 16%,var(--v));
  --d2:color-mix(in srgb,#000000 36%,var(--v));
  --ac:#E8DCC4;
}

@media(max-width:760px){
  .dsf__b{min-height:0;padding:22px 0}
}

.dsf__bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;opacity:.2;filter:saturate(.45) contrast(1.06);
}
.dsf__veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(94deg,color-mix(in srgb,var(--d1) 92%,transparent) 0%,
    color-mix(in srgb,var(--d1) 62%,transparent) 56%,transparent 100%);
}

.dsf__in{
  position:relative;z-index:2;display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  text-decoration:none;color:inherit;
}
@media(max-width:820px){
  .dsf__in{flex-wrap:wrap;gap:14px}
}

.dsf__ic{
  width:60px;height:60px;flex:none;display:grid;place-items:center;border-radius:5px;
  font-size:23px;color:var(--d2);background:var(--ac);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  transition:transform .38s var(--ease),background .3s;
}
@media(max-width:520px){.dsf__ic{width:48px;height:48px;font-size:19px}}

.dsf__tx{flex:1;min-width:0}
.dsf__tag{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ac);
}
.dsf__t{
  display:block;margin-top:8px;font-family:var(--font-heading,'Sora','Sora fb'),system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.28rem,2.5vw,1.86rem);line-height:1.14;
  letter-spacing:-.026em;color:#FFFFFF;
}
.dsf__r{
  display:block;margin-top:10px;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.78);
  max-width:58ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:820px){.dsf__r{-webkit-line-clamp:3}}

@media(prefers-reduced-motion:reduce){
  .dsf__ic{transition:none}
}

/* ══ LADOS ALTERNADOS ══
   O conteúdo troca de lado a cada tarja. A película cobre APENAS a metade do
   conteúdo, e some antes da outra: o lado livre mostra a fotografia sem véu.
   É por isso que a imagem entra em opacidade alta, não mais a 20%. */
/* ⚠ Saturacao devolvida. A foto entrava dessaturada (.72) E recebia uma cor
   saturada por cima: o pior dos dois mundos, porque o que sobrava de cor na
   imagem era a do veu, nao a da cena. Com veu neutro a foto pode ser foto.
   `object-position` mais ao centro na vertical: com a fonte panoramica nova
   nao ha mais tira estreita a compensar. */
.dsf__bg{opacity:1;filter:saturate(1) contrast(1.04);object-position:68% 50%;
  transform:scale(1.05);transition:transform 1.4s var(--ease),filter .6s}
.dsf__b--dir .dsf__bg{object-position:32% 50%}

.dsf__veu{
  background:linear-gradient(90deg,
    var(--d2) 0%,
    color-mix(in srgb,var(--d1) 96%,transparent) 34%,
    color-mix(in srgb,var(--d1) 62%,transparent) 54%,
    transparent 74%);
}
.dsf__b--dir .dsf__veu{
  background:linear-gradient(270deg,
    var(--d2) 0%,
    color-mix(in srgb,var(--d1) 96%,transparent) 34%,
    color-mix(in srgb,var(--d1) 62%,transparent) 54%,
    transparent 74%);
}

.dsf__in{max-width:none}
.dsf__b .dsf__in{justify-content:flex-start}
.dsf__b--dir .dsf__in{flex-direction:row-reverse;text-align:right}
.dsf__tx{flex:0 1 clamp(320px,46%,560px)}
@media(max-width:820px){
  .dsf__b--dir .dsf__in{flex-direction:row;text-align:left}
  .dsf__tx{flex:1 1 auto}
  .dsf__veu,.dsf__b--dir .dsf__veu{
    background:linear-gradient(90deg,var(--d2) 0%,color-mix(in srgb,var(--d1) 88%,transparent) 62%,color-mix(in srgb,var(--d1) 52%,transparent) 100%);
  }
}

/* ══ SEM RAIO ══ a geometria de escudo do site é canto vivo aqui */
.dsf__ic{border-radius:0}

/* ══ ENTRADA POR ROLAGEM ══
   Anima só TRANSFORM. A opacidade fica em 1 do começo ao fim, porque reveal
   que nasce invisível já deixou esta home em branco no passado quando o
   observer não disparava. Sem JS: usa a linha do tempo de visualização, e
   onde ela não existir a tarja simplesmente aparece pronta. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .dsf__bg{
      animation:dsfParal linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes dsfParal{from{transform:scale(1.14) translateY(-3.4%)}to{transform:scale(1.14) translateY(3.4%)}}

    .dsf__tx{
      animation:dsfTexto linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 40%;
    }
    @keyframes dsfTexto{from{transform:translateX(-26px)}to{transform:none}}
    .dsf__b--dir .dsf__tx{animation-name:dsfTextoDir}
    @keyframes dsfTextoDir{from{transform:translateX(26px)}to{transform:none}}

    .dsf__ic{
      animation:dsfIcone linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 36%;
    }
    @keyframes dsfIcone{from{transform:scale(.7) rotate(-9deg)}to{transform:none}}
  }
}

@media(prefers-reduced-motion:reduce){
  .dsf__b,.dsf__bg,.dsf__tx,.dsf__ic{animation:none!important;transform:none!important}
  }

/* ══ ENCAIXE ══
   As tarjas se tocam: sem margem, sem fio, sem raio. O raio precisa vir com a
   especificidade emprestada de dois IDs porque o bloco `cv-square` do base.php
   arredonda TUDO em 4px com `:not(#_):not(#_)` e !important. Sem isto, os
   cantos abriam e o pergaminho da página aparecia entre uma tarja e outra. */
.dsf,.dsf__b,.dsf__bg,.dsf__veu,.dsf__ic,.dsf__in{margin:0}
.dsf__b:not(#_):not(#_):not(#_),
.dsf__bg:not(#_):not(#_):not(#_),
.dsf__veu:not(#_):not(#_):not(#_),
.dsf__ic:not(#_):not(#_):not(#_){border-radius:0!important}
.dsf__b{display:flex}
.dsf__b + .dsf__b{margin-top:0}

/* ⚠ A TARJA NUNCA RECEBE TRANSFORM.
   `animation-timeline: view()` com `fill: both` prende o elemento no quadro
   inicial enquanto a faixa de rolagem não começou. Com um translateY de 38px
   ali, a tarja ficava deslocada para baixo e abria um vão acima dela: era esse
   o "espaçado e bugado". Quem anima é o CONTEÚDO (texto e ícone) e a foto,
   ambos dentro de um contêiner com overflow:hidden, onde deslocamento não
   produz buraco. Mesma família do erro já registrado no CLAUDE.md sobre
   `animation-fill-mode: both` no modal da ferramenta. */
.dsf__b{transform:none!important}