.ptc-ambassadors {
	/* Matches --ptc-terracotta (main.css) — the brand mark's own colour. */
	--amb-rust: #974B36;
	--amb-ink: #2b2521;
	--voz-peach: #f5efe9;
	background: #fff;
}

.ptc-ambassadors h2 {
	color: var(--amb-rust);
	font-style: italic;
	font-weight: 600;
}

.ptc-ambassadors-hero {
	position: relative;
	aspect-ratio: 1920 / 1072;
	min-height: 620px;
	overflow: hidden;
	color: #fff;
}

/* The exported PSD background lost its dark treatment on the way to a
   flat PNG — without this the white title/subtitle can land on the
   brightest part of the photo and become unreadable. A filter on the
   image itself (not a gradient ::before, darkest at the bottom) keeps
   the darkening even — a bottom-heavy gradient made the sliver of this
   photo revealed through the next section's own notch read as a
   noticeably darker patch poking into it. */
.ptc-ambassadors-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.72) saturate(1.05);
}

.ptc-ambassadors-hero__copy {
	position: absolute;
	z-index: 2;
	top: 25.8%;
	left: 23.2%;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.ptc-ambassadors-hero__copy h1 {
	font-size: clamp(2.6rem, 5.2vw, 6.2rem);
	font-style: italic;
	font-weight: 500;
	line-height: .8;
	letter-spacing: -.035em;
	margin: 0 0 24px;
}

.ptc-ambassadors-hero__copy p {
	font-family: var(--ptc-font-display);
	font-size: clamp(1.15rem, 1.8vw, 2rem);
	font-style: italic;
	margin: 0;
}

/* Holds the shared .ptc-scroll-down button on the seam between the hero and
   the territories section, plus the carved notch it nests into.
   Deliberately zero-height with NO negative margin: .ptc-ambassadors-
   territories paints an opaque #EFE6D8 background, so anything that pulls
   it up over the hero (a negative margin here shifts the next sibling too)
   puts that flat cream behind the notch — the cutout then reveals cream on
   cream and the seam reads as a straight line, which is exactly what the
   first two attempts at this shipped. The overlap is done by offsetting
   the notch and the button off the top of this slot instead, so only they
   move and the section below stays where it is. It also can't live inside
   territories: that section needs overflow: hidden for its oversized map,
   which would clip the button's upper half. */
.ptc-ambassadors-scroll-slot {
	position: relative;
	z-index: 5;
	height: 0;
}

/* notch-territorios.svg is the client's own artwork for this seam: a
   1920x178 sheet already filled in the section's #EFE6D8, with a 241.6-wide
   scoop carved 56 deep into its top edge. Painted as a plain background
   image rather than recoloured through a mask — the fill is already the
   colour this section needs, and a background can't silently no-op the way
   a mask does.
   Both offsets are fractions of the sheet's own 1920 units, so they track
   background-size: 56/1920 = 2.917vw of depth (which puts the bottom of
   the scoop exactly on the natural seam, leaving the flat part of the sheet
   sitting that far up into the photo), 178/1920 = 9.271vw of sheet. They
   scale by --ptc-notch-x because --ptc-notch-scale draws the sheet wider
   than the viewport on small screens; the two must move together. */
.ptc-ambassadors-scroll-slot::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: calc(-2.917vw * var(--ptc-notch-x));
	height: calc(9.271vw * var(--ptc-notch-x));
	background: url('../images/decor/notch-territorios.svg') top center / var(--ptc-notch-scale) auto no-repeat;
	pointer-events: none;
}

/* Centred on the flat top edge of that sheet — the same relationship the
   button has to the notch on every other page. */
.ptc-ambassadors-scroll-slot .ptc-scroll-down {
	top: calc(-2.917vw * var(--ptc-notch-x));
}

@media (min-width: 1025px) {
	/* Both only exist for the mobile flow, and both are in normal flow, so
	   left alone they would pad this section out on desktop with a strip of
	   buckles and a card the desktop layout already covers with its own
	   buckle-to-popup behaviour. */
	.ptc-ambassador-strip,
	.ptc-ambassador-mobile-card {
		display: none;
	}
}

/* min-height is tuned tightly to what the stage (below, capped at
   width: min(92%, 1180px)) actually needs at top: 29% — 1180px wide ×
   1591/1470 tall ÷ .71 (1 - 29%) ≈ 1798px, plus a small buffer. Too
   generous a floor here (more than the stage + heading actually fill)
   reads as the map sitting off-center, stranded in the upper half of a
   section that's taller than its own content on the wide-but-not-huge
   viewports where aspect-ratio alone doesn't yet exceed this floor. */
/* #f9f1e3 pixel-sampled straight from waterfall.png's own corners (its
   background fill, not --voz-peach) — the two are close but not
   identical, close enough that the mismatch mostly reads as a seam
   right where object-fit: contain's letterboxing meets the section. */
/* #EFE6D8 is pixel-sampled from territorios-map.png's own corners. The
   map is a rectangular PNG carrying that colour as its own background,
   laid over this section — so any difference between the two paints a
   visible rectangle around the artwork. The previous #F0E6DA was off by
   1/0/2 on RGB: invisible on some panels, a clear seam on others, which
   is exactly the "em alguns dispositivos a cor de fundo fica diferente
   da imagem" report. The file carries no ICC profile, so it is read as
   sRGB and this value matches it exactly on every display.
   max-height caps the aspect-ratio growth: the stage below stops
   widening once it hits its own cap, so past roughly 2100px of viewport
   the section kept getting taller while its content didn't, stranding
   over a thousand pixels of flat cream under the map on large screens. */
/* Laid out in flow rather than as a fixed-ratio box with two absolutely
   positioned children. The old version set the height from a 1920/2200 ratio
   and placed the heading at top: 2.3% and the map at top: 18% — percentages of
   a height that had nothing to do with either of them. That left ~480px of
   empty cream under the map at desktop (more as the viewport grew, since the
   map is capped in width), and any attempt to close the gap by lowering the
   section's height pushed the map up into the heading, which is taller at
   narrower widths because it wraps onto more lines.
   As a flex column the section is exactly padding + heading + gap + map +
   padding tall, so neither the dead space nor the collision can happen at any
   width. Same structure the tablet/mobile breakpoint already used. */
.ptc-ambassadors-territories {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.3% 0 4.7vw;
	overflow: hidden;
	background: #EFE6D8;
}

/* The markup puts the map before the heading (the heading is an absolutely
   positioned overlay in the original design), so flex order restores the
   reading order: heading first, map under it. The tablet/mobile block sets
   the same two values further down. */
.ptc-ambassadors-territories__heading { order: 1; }
.ptc-ambassadors-territories__stage { order: 2; }

.ptc-ambassadors-territories.has-open-territory {
	overflow: visible;
}

/* The stage keeps the isometric map's own aspect ratio at every screen
   size, so the buckle %-coordinates below always line up with the artwork
   — no more stretching/cropping tricks needed per breakpoint. Widened as
   far as the section's own height allows now that there's no background
   photo to frame — the buckles are positioned in % of this box, so they
   scale up right along with the map. */
.ptc-ambassadors-territories__stage {
	position: relative;
	z-index: 1;
	/* One variable drives the box and the two margins that cancel the
	   artwork's own padding (below), so a breakpoint only has to restate the
	   width. max(1400px, 68vw) leaves every width up to ~2060px exactly as it
	   was (the hand-tuned 1400px cap still wins there) and only lets the map
	   keep growing beyond it, so it doesn't shrink into the middle of an
	   ever-taller section on large monitors. The reference draws this map at
	   80% of the canvas width. */
	--ptc-map-w: min(92%, max(1400px, 68vw));
	width: var(--ptc-map-w);
	/* territorios-map.png is 3200x2832 but its island only occupies
	   y 336..2613 and x 399..2952 — 11.9% of flat cream above it, 7.7% below.
	   The dots are positioned as percentages of the whole image, so cropping
	   the file would move all ten of them; pulling the box up and down by
	   exactly those two margins instead leaves every coordinate untouched and
	   lets the spacing be measured against the artwork people actually see.
	   The factors convert each margin from a share of the image's height to a
	   share of its width (x 2832/3200), because percentage margins resolve
	   against width. */
	margin-top: calc(var(--ptc-map-w) * -0.105);
	margin-bottom: calc(var(--ptc-map-w) * -0.068);
	/* Matches territorios-map.png's own real 3200×2832 ratio — the
	   buckles below are positioned in % of this box, so any mismatch
	   between this ratio and the image's own would letterbox the image
	   (object-fit: contain, below) inside it and throw every buckle's
	   position off relative to what's actually visible. */
	aspect-ratio: 3200 / 2832;
}

.ptc-ambassadors-territories__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ptc-ambassador-territory {
	position: absolute;
	z-index: 2;
	aspect-ratio: var(--ptc-buckle-ratio, 2);
	--ptc-buckle-bottom: 94.6%;
	--ptc-buckle-edge: 96%;
	--ptc-line-len: clamp(46px, 5vw, 100px);
	/* Overrides the inline width % (tuned for a 1920px-wide reference image)
	   with a smooth clamp so buckles don't jump huge right above the 1024px
	   media-query breakpoint on common laptop widths. */
	width: clamp(140px, 11vw, 340px) !important;
}

.ptc-ambassador-territory.is-open {
	z-index: 5;
}

.ptc-ambassadors-territories__buckle {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform: rotate(var(--ptc-buckle-angle, 0deg)) scale(1);
	transition: transform .3s ease;
}

.ptc-ambassadors-territories__buckle:hover,
.ptc-ambassadors-territories__buckle:focus-visible {
	transform: rotate(var(--ptc-buckle-angle, 0deg)) scale(1.35);
}

.ptc-ambassador-territory.is-open .ptc-ambassadors-territories__buckle {
	transform: rotate(var(--ptc-buckle-angle, 0deg)) scale(1.4);
}

.ptc-ambassadors-territories__buckle img {
	display: block;
	width: 100%;
	filter: drop-shadow(0 10px 16px rgba(20, 14, 8, .4));
	pointer-events: none;
}

.ptc-ambassador-territory__line {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: #fff;
	border-radius: 999px;
	transition: height .45s cubic-bezier(.32, 0, .2, 1), width .45s cubic-bezier(.32, 0, .2, 1);
	filter: drop-shadow(0 1px 2px rgba(20, 14, 8, .4));
}

.ptc-ambassador-territory__pin {
	position: absolute;
	z-index: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--amb-rust);
	box-shadow: 0 0 0 4px rgba(184, 92, 56, .28);
	opacity: 0;
	transform-origin: center;
	pointer-events: none;
	transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.ptc-ambassador-territory.is-open .ptc-ambassador-territory__pin {
	opacity: 1;
	transition-delay: .45s;
}

/* Direction: down ------------------------------------------------------- */
.ptc-ambassador-territory[data-dir="down"] .ptc-ambassador-territory__line {
	left: 50%;
	top: var(--ptc-buckle-bottom);
	width: 2px;
	height: 0;
	transform: translateX(-50%);
}
.ptc-ambassador-territory[data-dir="down"].is-open .ptc-ambassador-territory__line {
	height: var(--ptc-line-len);
}
.ptc-ambassador-territory[data-dir="down"] .ptc-ambassador-territory__pin {
	left: 50%;
	top: var(--ptc-buckle-bottom);
	transform: translate(-50%, -50%) scale(.4);
}
.ptc-ambassador-territory[data-dir="down"].is-open .ptc-ambassador-territory__pin {
	transform: translate(-50%, -50%) scale(1);
}
.ptc-ambassador-territory[data-dir="down"] .ptc-ambassador-territory__card {
	left: 50%;
	top: calc(var(--ptc-buckle-bottom) + var(--ptc-line-len));
	transform: translate(-50%, 10px) scale(.9);
}
.ptc-ambassador-territory[data-dir="down"].is-open .ptc-ambassador-territory__card {
	transform: translate(-50%, 0) scale(1);
}

/* Direction: up ----------------------------------------------------------- */
.ptc-ambassador-territory[data-dir="up"] .ptc-ambassador-territory__line {
	left: 50%;
	bottom: var(--ptc-buckle-bottom);
	width: 2px;
	height: 0;
	transform: translateX(-50%);
}
.ptc-ambassador-territory[data-dir="up"].is-open .ptc-ambassador-territory__line {
	height: var(--ptc-line-len);
}
.ptc-ambassador-territory[data-dir="up"] .ptc-ambassador-territory__pin {
	left: 50%;
	bottom: var(--ptc-buckle-bottom);
	transform: translate(-50%, 50%) scale(.4);
}
.ptc-ambassador-territory[data-dir="up"].is-open .ptc-ambassador-territory__pin {
	transform: translate(-50%, 50%) scale(1);
}
.ptc-ambassador-territory[data-dir="up"] .ptc-ambassador-territory__card {
	left: 50%;
	bottom: calc(var(--ptc-buckle-bottom) + var(--ptc-line-len));
	transform: translate(-50%, -10px) scale(.9);
}
.ptc-ambassador-territory[data-dir="up"].is-open .ptc-ambassador-territory__card {
	transform: translate(-50%, 0) scale(1);
}

/* Direction: right ---------------------------------------------------------- */
.ptc-ambassador-territory[data-dir="right"] .ptc-ambassador-territory__line {
	top: 50%;
	left: var(--ptc-buckle-edge);
	height: 2px;
	width: 0;
	transform: translateY(-50%);
}
.ptc-ambassador-territory[data-dir="right"].is-open .ptc-ambassador-territory__line {
	width: var(--ptc-line-len);
}
.ptc-ambassador-territory[data-dir="right"] .ptc-ambassador-territory__pin {
	top: 50%;
	left: var(--ptc-buckle-edge);
	transform: translate(-50%, -50%) scale(.4);
}
.ptc-ambassador-territory[data-dir="right"].is-open .ptc-ambassador-territory__pin {
	transform: translate(-50%, -50%) scale(1);
}
.ptc-ambassador-territory[data-dir="right"] .ptc-ambassador-territory__card {
	top: 50%;
	left: calc(var(--ptc-buckle-edge) + var(--ptc-line-len));
	transform: translate(10px, -50%) scale(.9);
}
.ptc-ambassador-territory[data-dir="right"].is-open .ptc-ambassador-territory__card {
	transform: translate(0, -50%) scale(1);
}

/* Direction: left ----------------------------------------------------------- */
.ptc-ambassador-territory[data-dir="left"] .ptc-ambassador-territory__line {
	top: 50%;
	right: var(--ptc-buckle-edge);
	height: 2px;
	width: 0;
	transform: translateY(-50%);
}
.ptc-ambassador-territory[data-dir="left"].is-open .ptc-ambassador-territory__line {
	width: var(--ptc-line-len);
}
.ptc-ambassador-territory[data-dir="left"] .ptc-ambassador-territory__pin {
	top: 50%;
	right: var(--ptc-buckle-edge);
	transform: translate(50%, -50%) scale(.4);
}
.ptc-ambassador-territory[data-dir="left"].is-open .ptc-ambassador-territory__pin {
	transform: translate(50%, -50%) scale(1);
}
.ptc-ambassador-territory[data-dir="left"] .ptc-ambassador-territory__card {
	top: 50%;
	right: calc(var(--ptc-buckle-edge) + var(--ptc-line-len));
	transform: translate(-10px, -50%) scale(.9);
}
.ptc-ambassador-territory[data-dir="left"].is-open .ptc-ambassador-territory__card {
	transform: translate(0, -50%) scale(1);
}

.ptc-ambassador-territory__card {
	position: absolute;
	z-index: 2;
	width: clamp(200px, 15vw, 260px);
	padding: 22px 20px 20px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
	box-shadow: 0 12px 24px rgba(20, 14, 8, .35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility .35s;
}

.ptc-ambassador-territory.is-open .ptc-ambassador-territory__card {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: .45s;
}

.ptc-ambassador-territory__card-photo {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 auto 14px;
	border-radius: 50%;
	object-fit: cover;
}

.ptc-ambassador-territory__card h3 {
	font-family: var(--ptc-font-display);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--amb-rust);
	margin: 0 0 8px;
}

.ptc-ambassador-territory__card p {
	font-size: .8rem;
	line-height: 1.5;
	color: var(--ptc-ink-soft, #55483f);
	margin: 0;
}

.ptc-ambassadors-territories__heading {
	position: relative;
	z-index: 2;
	width: min(70%, 940px);
	/* 144px at 1920 — the gap the reference leaves between the end of this
	   text and the top of the map ARTWORK. See the negative margins on the
	   stage below: territorios-map.png carries 11.9% of empty cream above its
	   own island and 7.7% below, so before those were cancelled out this
	   number and the visible gap were two different things (230 declared,
	   377 on screen). */
	margin-bottom: clamp(32px, 7.5vw, 165px);
	text-align: center;
}

.ptc-ambassadors-territories__heading h2 {
	font-size: clamp(2.4rem, 4.7vw, 5.4rem);
	line-height: 1.05;
	margin-top: 6rem;
	margin-bottom: 1rem;
	font-weight: 400;
}

.ptc-ambassadors-territories__heading h2 strong {
	font-weight: 700;
}

.ptc-ambassadors-territories__heading p {
	max-width: 830px;
	margin: 0 auto;
	font-size: clamp(.9rem, 1.1vw, 1.2rem);
}

.ptc-ambassador-profile {
	position: absolute;
	z-index: 3;
	top: 21.2%;
	left: 26.2%;
	width: clamp(210px, 15vw, 290px);
	padding: 72px 25px 28px;
	border-radius: 0 0 28px 28px;
	background: #fff;
	text-align: center;
	box-shadow: 0 7px 24px rgba(77, 52, 31, .12);
}

.ptc-ambassador-profile::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 108px;
	height: 54px;
	transform: translate(-50%, -100%);
	border-radius: 108px 108px 0 0;
	background: #fff;
}

.ptc-ambassador-profile img {
	position: absolute;
	z-index: 2;
	top: -45px;
	left: 50%;
	transform: translateX(-50%);
	width: 104px;
	height: 104px;
	border: 6px solid #fff;
	border-radius: 50%;
	object-fit: cover;
}

.ptc-ambassador-profile h3 {
	font-size: clamp(1.45rem, 2vw, 2.2rem);
	font-style: italic;
	color: var(--amb-rust);
	margin-bottom: 12px;
}

.ptc-ambassador-profile p {
	font-size: clamp(.72rem, .8vw, .9rem);
	line-height: 1.5;
	margin: 0;
}

/* No prev/next arrows any more: the strip that replaced the dot-and-line
   mechanism is swiped, and it shows a buckle cut off at each edge, which
   says "there is more" without a pair of buttons to explain it. */
.ptc-ambassador-profile[data-ambassador-carousel] {
	display: none;
}

/* Lâminas territoriais — a fixed 3-column grid of downloadable PDF cards,
   one per territory, sitting between the map/strip section above and the
   contact form below. Not wired to the map's territory selection: the
   client's own layout shows all ten at once, so it stays a plain static
   grid rather than a synced component.

   The card markup/pattern mirrors .ptc-vozes-news-card (main.css) — same
   photo + bottom-left badge + white body + link row — rather than
   introducing a second card convention for what is, structurally, the
   same shape. */
.ptc-ambassadors-laminas {
	background: #FBFBFB;
	padding: 90px 0 100px;
	text-align: center;
}

.ptc-ambassadors-laminas__heading {
	max-width: 700px;
	margin: 0 auto 48px;
}

.ptc-ambassadors-laminas__heading h2 {
	font-size: clamp(2.2rem, 3.9vw, 3.9rem);
	margin-bottom: 16px;
}

.ptc-ambassadors-laminas__heading p {
	color: var(--amb-ink);
	font-size: clamp(.9rem, 1.1vw, 1.05rem);
	line-height: 1.5;
}

.ptc-ambassadors-laminas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 1080px;
	margin: 0 auto;
	text-align: left;
}

.ptc-lamina-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(43, 32, 27, .1);
}

.ptc-lamina-card__stretched-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ptc-lamina-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ptc-lamina-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.ptc-lamina-card:hover .ptc-lamina-card__media img {
	transform: scale(1.05);
}

.ptc-lamina-card__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 8px 18px;
	background: var(--amb-rust);
	color: #fff;
	font-size: .78rem;
	font-weight: 500;
	border-radius: 0 12px 0 0;
}

.ptc-lamina-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 26px;
}

.ptc-lamina-card__body h3 {
	font-family: var(--ptc-font-body);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--amb-ink);
	line-height: 1.35;
	margin-bottom: 10px;
}

.ptc-lamina-card__body p {
	font-size: .85rem;
	line-height: 1.55;
	color: var(--amb-ink);
	opacity: .75;
	margin: 0 0 18px;
}

.ptc-lamina-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-top: auto;
	color: var(--amb-rust);
	font-size: .85rem;
	font-weight: 700;
}

.ptc-lamina-card__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--voz-peach);
}

.ptc-lamina-card__icon svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 1024px) {
	.ptc-ambassadors-laminas__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
}

@media (max-width: 640px) {
	.ptc-ambassadors-laminas {
		padding: 60px 0 70px;
	}
}

/* background-position: bottom (not center) so the crop never reveals
   the blank margin baked into the top of the source PNG — see the
   matching comment on .ptc-vozes-contact in vozes.css for the full
   story. */
.ptc-ambassadors-contact {
	position: relative;
	padding-top: 1px;
	padding-bottom: 3rem;
	/* Was its own ambassadors-contact-bg.png — swapped for the same shared
	   photo every other .ptc-contact-form--transparent page uses (home's
	   .ptc-cta in main.css, .ptc-vozes-contact in vozes.css), so the
	   contact section looks the same wherever it appears. */
	background: linear-gradient(rgba(151,75,54,.6), rgba(151,75,54,.6)), url('../images/home-cta-contact-shared-bg.png') no-repeat bottom center / cover;
}

.ptc-ambassadors-contact .ptc-contact-form--transparent {
	padding-top: 60px;
}

.ptc-ambassadors-contact .ptc-contact-form {
	padding: 0 100px;
}

.ptc-ambassadors-contact .ptc-contact-form__heading {
	max-width: 760px;
	margin: 0 auto 70px;
	font-size: clamp(2.6rem, 5.2vw, 5.8rem);
	line-height: .9;
	padding-top: 0;
	margin-top: 3rem;
}

.ptc-ambassadors-contact .ptc-form {
	max-width: 1040px;
	padding-bottom: 6rem;
}

.ptc-ambassadors-contact .ptc-form input[type="text"],
.ptc-ambassadors-contact .ptc-form input[type="email"],
.ptc-ambassadors-contact .ptc-form select,
.ptc-ambassadors-contact .ptc-form textarea {
	padding: 13px 18px;
	border: 1px solid rgba(255, 255, 255, .58);
	border-radius: 7px;
	background: rgba(255, 255, 255, .08);
}

.ptc-ambassadors-contact .ptc-form textarea {
	min-height: 110px;
}

@media (max-width: 1024px) {
	.ptc-ambassadors-territories {
		aspect-ratio: auto;
		min-height: 1320px;
		margin-top: 0;
	}

	.ptc-ambassadors-territories__stage {
		top: 34%;
		--ptc-map-w: min(90%, 780px);
	}

	.ptc-ambassador-territory {
		--ptc-line-len: clamp(34px, 4.6vw, 70px);
	}

	/* The card is position: fixed below desktop, so it no longer needs the
	   section to switch to overflow: visible — keeping it hidden here is a
	   safety net against horizontal scroll from any stray offset. */
	.ptc-ambassadors-territories.has-open-territory {
		overflow: hidden;
	}

	.ptc-ambassador-territory__card {
		position: fixed !important;
		left: 50% !important;
		top: 50% !important;
		right: auto !important;
		bottom: auto !important;
		width: min(92vw, 320px) !important;
		max-width: 92vw !important;
		max-height: 95vh !important;
		overflow: auto !important;
		z-index: 100 !important;
		transform: translate(-50%, -45%) scale(.9) !important;
	}

	.ptc-ambassador-territory.is-open .ptc-ambassador-territory__card {
		transform: translate(-50%, -50%) scale(1) !important;
	}

	/* The buckle badges are sized as a % of the map width, tuned for the
	   1920px-wide desktop artwork. Left at that %, they render huge and
	   overlapping on narrow screens, so cap their pixel size below desktop. */
	.ptc-ambassador-territory {
		width: clamp(112px, 14vw, 168px) !important;
	}

	/* These used to be hand-calibrated separately from the desktop inline
	   left/top, back when .ptc-ambassadors-territories__stage's
	   aspect-ratio didn't actually match territorios-map.png's own real
	   proportions — object-fit: contain was letterboxing the image
	   inside the stage box differently at different widths, so the
	   same % coordinates landed in different spots on the visible image
	   depending on how much letterbox gap there was. Now that the
	   stage's aspect-ratio is set to the image's real 3200×2832 ratio
	   (main desktop rule), there's no letterboxing at any width, so the
	   same precise Figma-derived % from the desktop array works
	   everywhere — these no longer need their own separate values. */
	.ptc-ambassador-territory[data-territory="amazonia"] { left: 54.33% !important; top: 15.76% !important; }
	.ptc-ambassador-territory[data-territory="Pantanal_Norte"] { left: 27.62% !important; top: 40.87% !important; }
	.ptc-ambassador-territory[data-territory="Matopiba"] { left: 42.25% !important; top: 28.39% !important; }
	.ptc-ambassador-territory[data-territory="AltoMedioAraguaia"] { left: 45.27% !important; top: 41.46% !important; }
	.ptc-ambassador-territory[data-territory="Corredor"] { left: 63.19% !important; top: 40.96% !important; }
	.ptc-ambassador-territory[data-territory="SaoLuiz"] { left: 53.00% !important; top: 59.67% !important; }
	.ptc-ambassador-territory[data-territory="PantanalSul"] { left: 31.83% !important; top: 57.46% !important; }
	.ptc-ambassador-territory[data-territory="AltaNoroeste"] { left: 16.73% !important; top: 65.76% !important; }
	.ptc-ambassador-territory[data-territory="Rondonia"] { left: 13.17% !important; top: 30.57% !important; }
	.ptc-ambassador-territory[data-territory="OesteBaiano"] { left: 75.29% !important; top: 30.83% !important; }

	/* Below desktop, every buckle opens straight down so the line/pin never
	   reach past the left or right edge of the map and trigger horizontal
	   scroll on the page. */
	.ptc-ambassador-territory[data-dir="up"] .ptc-ambassador-territory__line,
	.ptc-ambassador-territory[data-dir="left"] .ptc-ambassador-territory__line,
	.ptc-ambassador-territory[data-dir="right"] .ptc-ambassador-territory__line {
		left: 50%;
		right: auto;
		top: var(--ptc-buckle-bottom);
		bottom: auto;
		width: 2px;
		height: 0;
		transform: translateX(-50%);
	}
	.ptc-ambassador-territory[data-dir="up"].is-open .ptc-ambassador-territory__line,
	.ptc-ambassador-territory[data-dir="left"].is-open .ptc-ambassador-territory__line,
	.ptc-ambassador-territory[data-dir="right"].is-open .ptc-ambassador-territory__line {
		width: 2px;
		height: var(--ptc-line-len);
	}
	.ptc-ambassador-territory[data-dir="up"] .ptc-ambassador-territory__pin,
	.ptc-ambassador-territory[data-dir="left"] .ptc-ambassador-territory__pin,
	.ptc-ambassador-territory[data-dir="right"] .ptc-ambassador-territory__pin {
		left: 50%;
		right: auto;
		top: var(--ptc-buckle-bottom);
		bottom: auto;
		transform: translate(-50%, -50%) scale(.4);
	}
	.ptc-ambassador-territory[data-dir="up"].is-open .ptc-ambassador-territory__pin,
	.ptc-ambassador-territory[data-dir="left"].is-open .ptc-ambassador-territory__pin,
	.ptc-ambassador-territory[data-dir="right"].is-open .ptc-ambassador-territory__pin {
		transform: translate(-50%, -50%) scale(1);
	}

	.ptc-ambassadors-contact .ptc-contact-form {
		padding: 0 40px;
	}

	.ptc-ambassadors-contact .ptc-contact-form__heading {
		padding-top: 0;
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
}

@media (max-width: 760px) {
	/* Mobile keeps the same photo-with-overlaid-text layout as desktop
	   (an earlier version split this into a stacked photo-then-caption
	   flow instead — rejected, since it no longer read as a background
	   photo at all). The photo (__bg) stays position: absolute; inset: 0
	   with its existing height: 100% — that resolves fine against a
	   content-driven parent height because the CSS percentage-height
	   rule specifically carves out absolutely positioned children (only
	   non-absolute children fall back to "auto" against an auto-height
	   containing block). The copy block becomes a normal in-flow
	   element (instead of also being absolutely positioned) so it can
	   actually establish that parent height, and the section's fixed
	   aspect-ratio is dropped so it can grow to fit. Mobile wraps this
	   copy onto far more lines than desktop ever has to make room for,
	   so the photo now crops tighter to fill the resulting taller,
	   narrower box — the accepted trade-off for keeping the text on
	   the photo instead of below it. */
	.ptc-ambassadors-hero {
		aspect-ratio: auto;
		/* The banners now carry a 9:16 phone crop (see ptc_section_photo),
		   but the section's height still came only from the copy inside it —
		   about 427px, which squeezed a portrait photo into a letterbox and
		   left no room for the carved notch the scroll-down button sits in.
		   85svh gives the banner its own height: most of the screen, the
		   photo close to its real proportions, and space under the text for
		   that notch. svh (not vh) because on iOS vh measures the viewport
		   with the browser bars collapsed, so a vh-sized banner is always
		   taller than what's actually visible when the page loads. */
		min-height: 85vh;
		min-height: 85svh;
	}

	/* padding-top clears .ptc-site-header, which floats position: absolute
	   over this hero at every width (transparent background, 193px tall
	   on a phone with its nav toggle) — the site-wide 48px this used to
	   inherit left the title rendering underneath/behind it (reading as
	   crammed up against the logo). */
	.ptc-ambassadors-hero__copy {
		position: relative;
		top: auto;
		left: auto;
		padding: 220px 24px 48px;
	}

	.ptc-ambassadors-territories {
		min-height: 950px;
	}

	.ptc-ambassadors-territories__stage {
		top: 36%;
		--ptc-map-w: min(92%, 560px);
	}

	.ptc-ambassadors-territories__heading {
		top: 1.4%;
		width: calc(100% - 32px);
	}

	.ptc-ambassadors-territories__heading h2 {
		margin-top: 2rem;
	}

	.ptc-ambassador-profile {
		top: 26%;
		left: 8%;
		width: 190px;
	}

	.ptc-ambassador-territory {
		width: clamp(90px, 20vw, 132px) !important;
		--ptc-line-len: clamp(26px, 6vw, 48px);
	}

	.ptc-ambassador-territory__card {
		width: clamp(120px, 30vw, 160px);
	}

	.ptc-ambassadors-contact .ptc-contact-form {
		padding: 0 24px;
	}

}

@media (max-width: 480px) {
	.ptc-ambassadors-hero__copy h1 {
		font-size: 2.85rem;
	}

	.ptc-ambassadors-territories {
		width: 100%;
		margin: 0;
		aspect-ratio: auto;
		min-height: 850px;
		height: auto;
	}

	.ptc-ambassadors-territories__stage {
		top: 38%;
		--ptc-map-w: min(96%, 440px);
	}

	.ptc-ambassadors-territories__heading {
		top: 1.6%;
		margin-top: 3rem;
	}

	.ptc-ambassadors-territories__heading h2 {
		margin-top: 1rem;
		margin-bottom: .6rem;
	}

	.ptc-ambassadors-territories__heading p {
		font-size: .85rem;
	}

	.ptc-ambassadors-territories__heading h2 {
		font-size: 2.3rem;
	}

	.ptc-ambassador-territory {
		width: clamp(78px, 19vw, 108px) !important;
		--ptc-line-len: clamp(20px, 7vw, 36px);
	}

	.ptc-ambassador-territory__card {
		position: fixed !important;
		left: 50% !important;
		top: 50% !important;
		right: auto !important;
		bottom: auto !important;
		width: min(92vw, 320px) !important;
		max-width: 92vw !important;
		max-height: 95vh !important;
		overflow: auto !important;
		z-index: 100 !important;
		transform: translate(-50%, -45%) scale(.9) !important;
	}

	.ptc-ambassador-territory.is-open .ptc-ambassador-territory__card {
		transform: translate(-50%, -50%) scale(1) !important;
	}

	.ptc-ambassador-territory__pin {
		width: 10px;
		height: 10px;
	}

	.ptc-ambassador-profile {
		--ptc-profile-img: clamp(240px, 62vw, 340px);
		top: 20%;
		left: 50%;
		width: clamp(360px, 96vw, 560px);
		padding: calc(var(--ptc-profile-img) / 2 + 32px) 28px 40px;
		transform: translateX(-50%);
	}

	.ptc-ambassador-profile::before {
		width: calc(var(--ptc-profile-img) + 20px);
		height: calc((var(--ptc-profile-img) + 20px) / 2);
		border-radius: calc((var(--ptc-profile-img) + 20px) / 2) calc((var(--ptc-profile-img) + 20px) / 2) 0 0;
	}

	.ptc-ambassador-profile img {
		width: var(--ptc-profile-img);
		height: var(--ptc-profile-img);
		top: calc(-1 * var(--ptc-profile-img) / 2 + 10px);
		border-width: 8px;
	}

	.ptc-ambassador-profile h3 {
		font-size: clamp(1.8rem, 5.4vw, 2.6rem);
		margin-bottom: 18px;
	}

	.ptc-ambassador-profile p {
		font-size: clamp(1rem, 3.2vw, 1.3rem);
		line-height: 1.55;
	}

	.ptc-ambassadors-contact .ptc-contact-form {
		padding: 40px 16px 60px;
	}
}

/* Territories map, tablet and below: dots instead of fivelas --------------- */

/* The fivela buckle art becomes unreadably small/fiddly to tap once the map
   itself has shrunk down from its full desktop size, so it's swapped for a
   plain dot, and the whole line/pin/popup-card reveal mechanism (built for
   a wide desktop stage) is replaced by the .ptc-ambassador-profile carousel
   + prev/next arrows placed after the map in the markup — content driven by
   each territory's data-amb-* attributes via main.js. Threshold matches the
   1024px "tablet" breakpoint above (was 760px, phone-only) — at widths
   between 760 and 1024px the map itself is already noticeably smaller
   there while the buckles kept their larger tablet-tuned size, reading as
   oversized and cramped relative to the shrunk map. Placed last in the
   file (after the 1024/760/480px blocks above) so these rules win the
   cascade at matching widths without needing !important. */
@media (max-width: 1024px) {
	.ptc-ambassadors-territories__buckle img,
	.ptc-ambassador-territory__line,
	.ptc-ambassador-territory__pin,
	.ptc-ambassador-territory__card {
		display: none !important;
	}

	/* The inline left/top on each territory is the TOP-LEFT corner of the
	   fivela badge, because that is what the desktop layout draws there. The
	   dot that replaces the badge here is only 30px across, and as a plain
	   block it inherited that same corner — so every dot sat up and to the
	   left of the place it is meant to mark, by roughly half a badge.
	   Centring it inside the territory box puts it where the badge's own
	   middle falls, and does so at each breakpoint's box width (112 / 90 /
	   78px) without a separate offset for each. */
	.ptc-ambassador-territory {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* The unselected dots step back — smaller, softer, less contrast — so
	   the selected one stands out by both growing and being the only one at
	   full strength, instead of relying on a single cue. */
	.ptc-ambassadors-territories__buckle {
		width: 16px;
		height: 16px;
		border: 3px solid rgba(255, 255, 255, .85);
		border-radius: 50%;
		background: rgba(151, 75, 54, .8);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 6px rgba(20, 14, 8, .3);
		transform: none;
		transition: width .2s ease, height .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
	}

	.ptc-ambassadors-territories__buckle:hover,
	.ptc-ambassadors-territories__buckle:focus-visible,
	.ptc-ambassador-territory.is-open .ptc-ambassadors-territories__buckle {
		transform: none;
	}

	/* The selected dot: nearly double the diameter of the others, inverted
	   (white centre in a solid rust ring) and lifted off the illustration by
	   a white halo and a real drop shadow. Four cues at once — size, fill,
	   halo, shadow — because one alone kept getting lost in a map that is
	   itself full of colour and texture. Sized, not scaled, so the halo and
	   the shadow stay crisp instead of being magnified with it. */
	.ptc-ambassador-territory.is-active .ptc-ambassadors-territories__buckle,
	.ptc-ambassador-territory.is-active .ptc-ambassadors-territories__buckle:hover {
		width: 30px;
		height: 30px;
		background: #fff;
		border-color: var(--amb-rust);
		border-width: 7px;
		box-shadow:
			0 0 0 3px rgba(255, 255, 255, .95),
			0 0 0 4px rgba(20, 14, 8, .18),
			0 6px 16px rgba(20, 14, 8, .5);
	}

	/* .ptc-ambassadors-territories__heading and __stage are position:
	   absolute on desktop (precise % overlays on a fixed-aspect-ratio
	   collage), which is how the carousel card ended up rendering above
	   the map instead of below it: absolute siblings don't occupy any
	   document flow space, so the carousel — the only actually in-flow
	   content — just landed at this section's very top regardless of its
	   own DOM position after the map. Switching the section to a flex
	   column and both of those to in-flow items fixes that at the root:
	   visual order is set explicitly with `order` (independent of DOM
	   order, so the PHP markup didn't need to change), and height is now
	   driven by actual content instead of a fixed aspect-ratio/min-height
	   tuned for the desktop collage. */
	.ptc-ambassadors-territories {
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: auto;
		height: auto;
		min-height: 0;
		overflow: visible;
		padding: 56px 24px 48px;
		/* No top: -30px nudge any more — that pulled this section's opaque
		   #EFE6D8 up over the bottom of the hero photo, which is exactly the
		   band the scroll-down notch needs to carve into. The notch sheet on
		   .ptc-ambassadors-scroll-slot::before now covers that overlap itself,
		   scooped instead of flat. */
	}

	.ptc-ambassadors-territories__heading {
		position: static;
		order: 1;
		width: 100%;
		max-width: none;
		transform: none;
		margin-bottom: 28px;
	}

	/* Breaks out past the section's own 24px side padding (used by the
	   heading/card text above and below it) instead of sitting inside
	   it like they do — the map reads small on a phone at content
	   width alone, and unlike text it doesn't need that gutter for
	   readability. */
	/* The island inside territorios-map.png fills 79.8% of the file's width
	   (x 399..2952 of 3200), so a box the width of the screen drew a map with
	   a 44px gutter of cream on each side — the map reading small on a phone.
	   125.3vw makes the island itself exactly one screen wide, and the section
	   clips the cream that now falls outside.
	   The island is not centred in the file (12.5% of margin on its left,
	   7.7% on its right), so centring the BOX leaves the island sitting about
	   3% to the right of centre. That offset is kept on purpose — it reads
	   better with the landmass's own weight than a mathematically centred
	   island did. All ten dots stay well inside: the leftmost lands at 4% of
	   the viewport and the rightmost ends at 90% of it. */
	/* The map — and with it every dot on it — is gone below this breakpoint.
	   Reading ten 16px dots scattered over a shrunken map, then a strip of
	   the same ten territories right underneath, was the map explaining
	   itself twice; the strip alone (each buckle already carries its own
	   territory name and municipalities) is the one legible way to browse
	   here. display: none, not removed from the markup — .ptc-ambassador-
	   territory still exists in the DOM as main.js's data source (name,
	   bio, photo for the card, and the .is-active state a strip tap sets on
	   it), it simply never paints. */
	.ptc-ambassadors-territories__stage {
		display: none;
	}

	/* The strip of buckles, and the primary control below 1024px. It sits
	   outside the section's 24px gutter for the same reason the map does:
	   an item peeking in from each edge is what tells a thumb there is more
	   to swipe. scroll-snap holds whichever buckle you land on.
	   The buckles are readable at this size — territory and municipalities
	   are engraved on them — which is why they replace a row of dots and
	   why the card underneath can stay short. */
	.ptc-ambassador-strip {
		/* One length drives both the item and the side padding that centres
		   it. The padding is in vw, not %: a percentage padding resolves
		   against the CONTAINING BLOCK's width — this section's content box,
		   which its own 24px gutter makes narrower than the strip itself —
		   so the snap centre landed 24px left of the screen centre. */
		--strip-item: min(190px, 56vw);
		order: 3;
		display: flex;
		gap: 14px;
		width: 100vw;
		margin: 28px 0 0;
		/* 12px, not 4: setting overflow-x also makes overflow-y clip (a
		   computed 'visible' becomes 'auto' when the other axis isn't), so
		   the selected buckle's scale() was being shaved top and bottom. */
		padding: 12px calc(50vw - var(--strip-item) / 2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ptc-ambassador-strip::-webkit-scrollbar { display: none; }

	/* The buckle is a background, not an <img>, and background-image is
	   declared only inside this media query. An <img> here — even
	   loading="lazy" inside a display: none container — is still fetched, so
	   desktop was pulling the whole 493 KB mobile set on top of its own
	   9.8 MB of full-size buckles. A background image in a subtree that
	   computes to display: none is never fetched, and above 1024px this
	   declaration doesn't exist at all. The territory name lives in a
	   screen-reader-text span instead of an alt attribute.
	   One box for all ten, at the tallest buckle's ratio, with contain: they
	   differ in height (198-235px at 420 wide), so a shared box keeps the row
	   even and centres each one in it. */
	.ptc-ambassador-strip__item {
		flex: 0 0 auto;
		width: var(--strip-item);
		aspect-ratio: 420 / 235;
		padding: 0;
		border: 0;
		background: var(--ptc-strip-buckle) center / contain no-repeat;
		cursor: pointer;
		scroll-snap-align: center;
		opacity: .5;
		filter: saturate(.75);
		transition: opacity .25s ease, filter .25s ease, transform .25s ease;
	}

	/* The selected buckle is the only one at full strength; the rest are
	   dimmed rather than hidden, so the strip still reads as a row you can
	   move along. */
	.ptc-ambassador-strip__item.is-active {
		opacity: 1;
		filter: none;
		transform: scale(1.06);
	}

	.ptc-ambassador-strip__item:focus-visible {
		outline: 2px solid var(--amb-rust);
		outline-offset: 4px;
		border-radius: 6px;
	}

	/* Always on screen and always filled — no open/close. The old card
	   collapsed to max-height: 0 until a dot was tapped, which is what made
	   the section feel like it did nothing. */
	.ptc-ambassador-mobile-card {
		order: 4;
		width: min(90%, 340px);
		margin: 22px auto 0;
		padding: 22px 20px 20px;
		border-radius: 20px;
		background: #fff;
		text-align: center;
		box-shadow: 0 12px 24px rgba(20, 14, 8, .35);
	}

	.ptc-ambassador-mobile-card__territory {
		display: block;
		font-family: var(--ptc-font-condensed, var(--ptc-font-body));
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--amb-rust);
		margin-bottom: 14px;
	}

	.ptc-ambassador-mobile-card__photo {
		display: block;
		width: 110px;
		height: 110px;
		margin: 0 auto 14px;
		border-radius: 50%;
		object-fit: cover;
	}

	.ptc-ambassador-mobile-card__photo[hidden],
	.ptc-ambassador-mobile-card [hidden] {
		display: none;
	}

	.ptc-ambassador-mobile-card h3 {
		font-family: var(--ptc-font-display);
		font-style: italic;
		font-size: 1.2rem;
		color: var(--amb-rust);
		margin: 0 0 8px;
	}

	.ptc-ambassador-mobile-card p {
		font-size: .82rem;
		line-height: 1.55;
		color: var(--ptc-ink-soft, #55483f);
		margin: 0;
	}

	.ptc-ambassador-mobile-card__pending {
		font-style: italic;
		opacity: .8;
	}
}

/* Section connectors (page-specific bump color) --------------------------- */

.ptc-wave-divider--slate::before { background: #5c626a; }
.ptc-wave-divider--slate .ptc-wave-divider__bump path { fill: #5c626a; }