fix(placas): faixa sobe para logo abaixo da foto/diagrama e não estoura no celular

Na página de série a faixa passa a ficar entre o bloco de foto/diagrama de pinos
e as especificações. No celular o botão ocupa a largura do cartão e as setas ficam
numa linha própria; testado de 320 a 1366 px sem nada ultrapassar a área.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -13,7 +13,8 @@ Tudo o que muda de relevante no ESPDocs está aqui. O formato segue o
   pelas de loja oficial, e fica parada até o leitor usar as setas, com transição suave (respeita
   "reduzir movimento"). Cada placa traz o chip, uma linha de motivo traduzida nos 6 idiomas e o
   link de afiliado do idioma da página, marcado como tal. Não aparece quando o chip não tem
-  placa. Sem rastreamento nem cookies.
+  placa. Sem rastreamento nem cookies. Na série, fica entre a foto/diagrama de pinos e as
+  especificações; no celular, o botão ocupa a largura do cartão.
 - Catálogo de placas com link de afiliado por país: a planilha ganha as colunas `Link_en`,
   `Link_es`, `Link_fr`, `Link_de` e `Link_zh-CN`, e o botão do card usa a do idioma da página,
   caindo no `Link` (Brasil) quando a coluna está vazia. As colunas de link nunca viram filtro.

app/[locale]/series/[key]/page.jsx

@@ -844,8 +844,8 @@ export default async function SerieDetail({ params }) {
 
 				<div className="shell mt-10">
 					<SeriesTabMenu tabs={tabs} isEn={isEn} isEs={isEs} isFr={isFr} isDe={isDe} isZh={isZh} />
-					<PinRestrictions conexoes={conexoes} serieKey={key} isEn={isEn} isEs={isEs} isFr={isFr} isDe={isDe} isZh={isZh} />
 					<PlacasSugeridas chips={[key]} className="mt-5" />
+					<PinRestrictions conexoes={conexoes} serieKey={key} isEn={isEn} isEs={isEs} isFr={isFr} isDe={isDe} isZh={isZh} />
 				</div>
 
 				<div className="shell mt-12">

components/PlacasSugeridas.jsx

@@ -84,7 +84,7 @@ export default function PlacasSugeridas({ chips, className = "" }) {
 	};
 
 	return (
-		<section aria-label={t.regiao} className={`sugestao-faixa card-quiet flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:gap-5 ${className}`}>
+		<section aria-label={t.regiao} className={`sugestao-faixa card-quiet flex flex-col gap-4 p-4 md:flex-row md:items-center md:gap-5 ${className}`}>
 			<div
 				key={`${placa.Nome}-${indice}`}
 				className={`flex min-w-0 flex-1 items-center gap-4 ${sentido === "proxima" ? "sugestao-proxima" : sentido === "anterior" ? "sugestao-anterior" : ""}`}
@@ -103,9 +103,9 @@ export default function PlacasSugeridas({ chips, className = "" }) {
 				</div>
 			</div>
 
-			<div className="flex shrink-0 items-center gap-2">
+			<div className="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:gap-2">
 				{total > 1 && (
-					<div className="flex items-center gap-1">
+					<div className="flex items-center justify-between gap-1 sm:justify-start">
 						<button type="button" onClick={() => ir(-1)} className="btn btn-ghost btn-icon" aria-label={t.anterior}>
 							<ChevronLeft className="h-4 w-4" aria-hidden="true" />
 						</button>
@@ -117,7 +117,7 @@ export default function PlacasSugeridas({ chips, className = "" }) {
 						</button>
 					</div>
 				)}
-				<a href={linkForLocale(placa, locale)} target="_blank" rel="sponsored noopener noreferrer" className="btn btn-primary btn-sm">
+				<a href={linkForLocale(placa, locale)} target="_blank" rel="sponsored noopener noreferrer" className="btn btn-primary btn-sm w-full sm:w-auto">
 					{t.ver}
 					<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
 					<span className="sr-only"> {t.aba}</span>