fix(site): limita o título do board e remove text-balance dos cards (S47)

O card em destaque perdeu o line-clamp-3 na reescrita da S47: com o feed do Instagram na frente, a legenda inteira (889 caracteres no caso real) era renderizada a 31px e esticava o board. Restaura o clamp de 3 linhas no destaque, mantém o clamp do compacto, troca text-balance por break-words (balance quebra o line-clamp em alguns browsers) e adiciona min-w-0 às colunas do grid. O e2e passa a pinar o clamp do card em destaque, não só o do compacto.

src/components/CampaignContentCard.tsx

@@ -59,7 +59,7 @@ export const CampaignContentCard = ({ card, variant = 'compact' }: CampaignConte
         ) : null}
       </div>
       <p className="mt-4 text-xs font-bold text-(--pt-red) lg:mt-5">{card.meta}</p>
-      <h3 className="mt-2 max-w-[690px] font-[family-name:var(--font-exo2)] text-[25px] leading-[1.12] font-extrabold tracking-[-0.02em] text-balance lg:text-[31px] lg:leading-[1.1] lg:tracking-[-0.025em]">
+      <h3 className="mt-2 line-clamp-3 max-w-[690px] font-[family-name:var(--font-exo2)] text-[25px] leading-[1.12] font-extrabold tracking-[-0.02em] break-words lg:text-[31px] lg:leading-[1.1] lg:tracking-[-0.025em]">
         {card.title}
       </h3>
       {card.subtitle ? (
@@ -74,7 +74,7 @@ export const CampaignContentCard = ({ card, variant = 'compact' }: CampaignConte
   ) : (
     <>
       <p className="text-xs font-bold text-(--pt-red)">{card.meta}</p>
-      <h3 className="mt-3 line-clamp-3 font-[family-name:var(--font-exo2)] text-xl leading-[1.18] font-extrabold tracking-[-0.02em] text-balance lg:text-[23px] lg:leading-[1.16]">
+      <h3 className="mt-3 line-clamp-3 font-[family-name:var(--font-exo2)] text-xl leading-[1.18] font-extrabold tracking-[-0.02em] break-words lg:text-[23px] lg:leading-[1.16]">
         {card.title}
       </h3>
       <p className="mt-4 text-sm font-bold text-(--pt-red)">
@@ -84,7 +84,7 @@ export const CampaignContentCard = ({ card, variant = 'compact' }: CampaignConte
   )
 
   return (
-    <div className="group relative h-full">
+    <div className="group relative h-full min-w-0">
       {card.external ? (
         <a
           href={card.href}

src/components/CampaignContentSection.tsx

@@ -174,10 +174,10 @@ export const CampaignContentSection = async () => {
 
         {featured ? (
           <div className="mt-8 grid border-y border-(--campaign-line) lg:mt-10 lg:grid-cols-12">
-            <article className="border-b border-(--campaign-line) py-7 lg:col-span-7 lg:border-r lg:border-b-0 lg:pr-8">
+            <article className="min-w-0 border-b border-(--campaign-line) py-7 lg:col-span-7 lg:border-r lg:border-b-0 lg:pr-8">
               <CampaignContentCard card={featured} variant="featured" />
             </article>
-            <div className="divide-y divide-(--campaign-line) lg:col-span-5 lg:pl-8">
+            <div className="min-w-0 divide-y divide-(--campaign-line) lg:col-span-5 lg:pl-8">
               {rest.map((card) => (
                 <article key={card.id}>
                   <CampaignContentCard card={card} variant="compact" />

tests/e2e/frontend.e2e.spec.ts

@@ -666,7 +666,11 @@ test.describe('Campaign home content section', () => {
 
       // Long captions are clamped with an ellipsis so a single post cannot
       // stretch the bento row (production captions run into hundreds of
-      // characters; the stub's reel caption is deliberately long).
+      // characters; the stub's reel caption is deliberately long). The
+      // featured title must clamp too — it is the lead of the board and the
+      // one that renders at the largest type size.
+      await expect(featured.locator('h3')).toHaveCSS('-webkit-line-clamp', '3')
+      await expect(featured.locator('h3')).toHaveCSS('overflow', 'hidden')
       const longCaptionTitle = section
         .getByRole('link', { name: /E2e Reel da caravana/ })
         .locator('h3')