From 23576b5c0642590fd9584260bc0705b25023429d Mon Sep 17 00:00:00 2001
From: Lucas Rayan <lucas.guerra@pop-pe.rnp.br>
Date: Mon, 2 Nov 2026 19:13:07 -0300
Subject: [PATCH] =?UTF-8?q?fix(placas):=20faixa=20sobe=20para=20logo=20aba?=
 =?UTF-8?q?ixo=20da=20foto/diagrama=20e=20n=C3=A3o=20estoura=20no=20celula?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                       | 3 ++-
 app/[locale]/series/[key]/page.jsx | 2 +-
 components/PlacasSugeridas.jsx     | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c890596..c2c9e43 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/app/[locale]/series/[key]/page.jsx b/app/[locale]/series/[key]/page.jsx
index e93f56e..ab1f3c3 100644
--- a/app/[locale]/series/[key]/page.jsx
+++ b/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">
diff --git a/components/PlacasSugeridas.jsx b/components/PlacasSugeridas.jsx
index f6069ca..4261ebd 100644
--- a/components/PlacasSugeridas.jsx
+++ b/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>