/* ==========================================================================
   Pecuária Tropical pelo Clima — base styles
   ========================================================================== */

:root {
	/* #974B36 is the brand mark's own colour — sampled from the three current
	   logo files (site logo, footer logo, TERRA ADORADA). The palette used to
	   run a brighter, more orange rust than the marks it sat next to, which is
	   what made the footer icons read as a different colour from the logo
	   beside them. The contact-form gradients keep their own literal rgba
	   values on purpose: those sit over a photo and were already approved. */
	--ptc-terracotta: #974B36;
	--ptc-terracotta-dark: #803C28;
	--ptc-brown-dark: #2b201b;
	--ptc-brown: #4a3830;
	--ptc-cream: #faf5ef;
	--ptc-cream-2: #f2e8dd;
	--ptc-parchment: #e8d9bc;
	--ptc-white: #ffffff;
	--ptc-ink: #262019;
	--ptc-ink-soft: #55483f;

	--ptc-font-display: 'IBM Plex Serif', Georgia, serif;
	--ptc-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--ptc-font-condensed: 'IBM Plex Sans Condensed', var(--ptc-font-body);

	/* Every seam on the site is a notch carved into a flat sheet (white-bg-1035,
	   white-bg-1435, skin-bg-1185, footer-bg, shape-7-role-bg), drawn at 100%
	   of the viewport width. That keeps the notch at its designed fraction of
	   the artwork — 64/1920 for the deep ones, 38/1920 for the shallow — which
	   is right on a desktop and disappears on a phone: 12px and 7px at 375px
	   wide, against a scroll button 40-52px across.
	   --ptc-notch-scale draws the sheet wider than the viewport on small
	   screens so the notch grows with it, and --ptc-notch-x scales the overlap
	   each section uses to sit over its neighbour by the same factor, so the
	   notch always reveals the section behind it rather than the page. The two
	   must move together. */
	--ptc-notch-scale: 100%;
	--ptc-notch-x: 1;

	--ptc-container-w: 1080px;
	--ptc-radius: 20px;
	--ptc-radius-sm: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
	margin: 0;
	font-family: var(--ptc-font-body);
	color: var(--ptc-ink);
	background: var(--ptc-white);
	line-height: 1.6;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--ptc-font-display);
	font-weight: 600;
	margin: 0 0 .5em;
	line-height: 1.03;
}

p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
	white-space: nowrap;
}

.ptc-container {
	width: 100%;
	max-width: var(--ptc-container-w);
	margin: 0 auto;
	padding: 0 24px;
	margin-bottom: 4rem;
}

/* Buttons ------------------------------------------------------------- */

.ptc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 6px 6px 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--ptc-ink);
	color: var(--ptc-white);
	font-family: var(--ptc-font-body);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}

.ptc-btn:hover { transform: translateY(-2px); }

.ptc-btn__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: url('../images/decor/btn-arrow.svg') no-repeat center / 13px auto, var(--ptc-terracotta);
	color: transparent;
	font-size: 0;
}

/* width: fixed (not min-width) — every .ptc-btn--light should read as
   the same pill regardless of its label's length, matching the
   reference SVG (one fixed-size pill, "Saiba mais" centered, circle
   fixed at the right edge). 240px comfortably fits the longest label
   in use ("Ver todas as notícias") without wrapping.
   The label span gets flex: 1 + text-align: center (not just
   justify-content: center on the button) so it centers in the space
   left over after the icon circle, the same way the reference's text
   sits center-of-remaining-space rather than center-of-the-whole-pill. */
.ptc-btn--light {
	background: var(--ptc-white);
	color: var(--ptc-ink);
	width: 240px;
	justify-content: center;
}

.ptc-btn--light > span:not(.ptc-btn__icon) {
	flex: 1;
	text-align: center;
}

/* Header / nav ---------------------------------------------------------- */

.ptc-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 32px 0;
	background: transparent;
	transition: padding .2s ease, background .2s ease;
}

.ptc-site-header.is-solid {
	background: rgba(38, 32, 25, .92);
	padding: 14px 0;
}

/* No shadow on the mark itself — instead the strip of photo behind the header
   is darkened, which is the same thing a print designer would do and leaves
   the logo and nav as flat white.
   It is needed, not cosmetic. Measured behind the logo box on each hero, the
   95th-percentile luminance of the photo is 124 on Vozes (4.2:1 against white),
   121 on the home page (4.4:1) and 242 on Chamado à Ação — a near-white sky,
   which puts an unshadowed white mark at 1.1:1, i.e. invisible. This gradient
   pulls all of them past the 4.5:1 AA floor.
   It fades to nothing well before the hero's own subject, so the photos still
   read as photos; and it is switched off once .is-solid kicks in, since that
   state already paints its own opaque background. */
.ptc-site-header::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(170px, 15vw, 340px);
	background: linear-gradient(180deg, rgba(24, 16, 11, .62) 0%, rgba(24, 16, 11, .52) 52%, rgba(24, 16, 11, 0) 100%);
	pointer-events: none;
}

.ptc-site-header.is-solid::before { opacity: 0; }

.ptc-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* The height here sizes the FILE, and the logo used to ship as a 1920x1080
   canvas whose artwork only filled 74% of the width and 57% of the height —
   so a 154px box drew an 88px mark with 66px of empty air, and that air also
   made the box wide enough (409px at the top of the clamp) that the flex row
   overflowed .ptc-container's 1032px content width past about 2500px of
   viewport. Flex then shrank the logo while its height stayed put, squashing
   it horizontally by 5%+ — the logo visibly changing shape as the window
   grew. logo-vozes.png is cropped to its artwork, so these numbers describe
   the mark itself: ~103px tall at 1920, up to 128px on wider screens.
   flex-shrink: 0 makes the squash impossible regardless of what the nav
   beside it ends up measuring in a given font. */
/* The mark ships in the brand terracotta, which is right in the footer (dark
   ink on a light background) and wrong here: the header floats over a photo,
   and on the Vozes hero it lands on a pale straw hat where it all but
   disappears. The reference sets the header logo in white. brightness(0)
   flattens every pixel to black and invert(1) turns that white, leaving the
   alpha channel — and therefore the mark's shape — untouched; it's a
   single-colour mark, so nothing is lost in the flattening. */
.ptc-site-header__logo img {
	display: block;
	height: clamp(62px, 5.4vw, 128px);
	width: auto;
	filter: brightness(0) invert(1);
}
.ptc-site-header__logo { display: flex; align-items: center; flex-shrink: 0; }

/* 56.7vw is exactly the 1080px this has always been at a 1905px viewport, so
   nothing changes at or below a normal desktop — it just stops the header
   from staying a fixed 1080px island in the middle of a much wider monitor
   while every section around it runs full-bleed. That mismatch is most of
   why the logo reads as small on a large screen. */
.ptc-site-header__inner { max-width: clamp(1080px, 56.7vw, 1600px); }

.ptc-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.ptc-nav__list a {
	color: var(--ptc-white);
	font-size: 14px;
	font-weight: 500;
}

.ptc-nav__list a:hover { color: var(--ptc-terracotta); }

.ptc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--ptc-white);
	cursor: pointer;
}

.ptc-nav-toggle__icon {
	width: 24px;
	height: 24px;
}

.ptc-nav-toggle__icon--close { display: none; }
.ptc-nav-toggle.is-active .ptc-nav-toggle__icon--open,
.ptc-nav-toggle[aria-expanded="true"] .ptc-nav-toggle__icon--open { display: none; }
.ptc-nav-toggle.is-active .ptc-nav-toggle__icon--close,
.ptc-nav-toggle[aria-expanded="true"] .ptc-nav-toggle__icon--close { display: block; }

html.mobile-menu-open,
html.mobile-menu-open body { overflow: hidden; }

html.mobile-menu-open body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, .55);
	pointer-events: auto;
}

/* Footer ------------------------------------------------------------------ */

/* footer-bg.svg has a real transparent notch cut into its top edge (the
   brand's horn silhouette) — no solid background-color layered behind
   it, or that color would fill the notch and hide whatever section
   comes before it. Pulled up over that section's bottom edge by the
   notch's own depth (64px at the image's 1920px reference width =
   3.34vw, same conversion used on the Vozes page) so the gap actually
   overlaps it instead of exposing empty space, at any viewport width.
   The scroll-top button sits nested in the notch. */
.ptc-site-footer {
	position: relative;
	z-index: 2;
	margin-top: calc(-3.34vw * var(--ptc-notch-x));
	padding: 48px 0 20px;
	text-align: center;
	background: url('../images/backgrounds/footer-bg.svg') no-repeat top center;
	background-size: var(--ptc-notch-scale) auto;
}

/* Sized with clamp (not a single breakpoint swap) so both buttons scale
   smoothly down to a legible tap target on narrow screens instead of
   staying pinned at the desktop 56px. The svg icon is sized as a
   percentage of the button so it scales down in step. */
.ptc-scroll-top {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 6vw, 56px);
	height: clamp(40px, 6vw, 56px);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	border-radius: 50%;
	border: none;
	background: var(--ptc-white);
	color: var(--ptc-terracotta);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.15);
	transition: transform .2s ease;
}

.ptc-scroll-top:hover { transform: translate(-50%, -50%) translateY(-3px); }
.ptc-scroll-top svg { width: 36%; height: 36%; }

/* Same idea as .ptc-scroll-top, but for the top notch of a section that
   follows a hero (white-bg-1035.svg) — a down-pointing button nested
   in the seam instead of an up-pointing one. Shared across pages so
   every "hero → white notch section" transition gets the same button. */
.ptc-scroll-down {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 6vw, 56px);
	height: clamp(40px, 6vw, 56px);
	position: absolute;
	z-index: 4;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	border: none;
	padding: 0;
	border-radius: 50%;
	background: var(--ptc-white);
	color: var(--ptc-terracotta);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.15);
	transition: transform .2s ease;
}

.ptc-scroll-down:hover { transform: translate(-50%, -50%) translateY(3px); }
.ptc-scroll-down svg { width: 36%; height: 36%; }

.ptc-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 40px;
	padding: 0 0 16px;
	/* Overrides .ptc-container's own margin-bottom: 4rem (a general
	   spacer meant for content sections, not this footer row) — with
	   it, the 64px gap above .ptc-site-footer__copy made the inner
	   content read as pinned to the top of the footer instead of
	   centered in it. */
	margin-bottom: 0;
}

.ptc-site-footer__brand {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* 86px, not the 150px this carried before: the footer used to draw
   logo-alt-color.png, a 1920x1080 canvas whose artwork filled only 57% of
   the height, so a 150px box rendered an 86px mark with 64px of empty air
   under it. It now draws the same cropped file as the header, where the box
   height IS the mark height — 86px keeps the footer wordmark exactly the
   size it has always been.
   width: auto is not decorative — without it the browser doesn't scale the
   image's width down together with max-height, so the mark rendered at its
   raw 1129px intrinsic width squashed into an 86px-tall box. That alone was
   wider than .ptc-site-footer__inner's own 1080px, which is what forced
   .ptc-site-footer__links and .ptc-site-footer__apoio onto a second row —
   the same fix .ptc-site-header__logo img already carries. */
.ptc-site-footer__logo img { max-height: 86px; width: auto; }

/* Slogan beside the wordmark ("Unir para transformar"). The narrow
   max-width is deliberate: it breaks the phrase over two short lines, the
   way the approved footer sets it, instead of one long line that pushes
   the links group off to the right. */
.ptc-site-footer__tagline {
	display: inline-block;
	max-width: 140px;
	font-family: var(--ptc-font-display);
	font-style: italic;
	font-size: 13px;
	line-height: 1.35;
	color: var(--ptc-terracotta);
	letter-spacing: .02em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ptc-site-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

/* Uppercase display italic, matching the approved footer reference —
   "ACOMPANHE NOSSO BLOG" / "SIGA O MOVIMENTO", set on two short lines
   beside their icon rather than one long sentence-case run. */
.ptc-site-footer__icon-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 180px;
	font-family: var(--ptc-font-display);
	font-size: 13px;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	/* Right-aligned: the label sits to the LEFT of its icon, so ragging the
	   lines right is what keeps them flush against that icon instead of
	   leaving a ragged gap between the two. */
	text-align: right;
	color: var(--ptc-terracotta);
	transition: opacity .2s ease;
}

/* Caps the label at a measure that breaks both of them the same way the
   reference does — "ACOMPANHE / NOSSO BLOG" and "SIGA O / MOVIMENTO" — so
   the two links read as a matched pair. The window is narrow: above 123px
   "Siga o movimento" stops wrapping at all, above 125px "Acompanhe nosso
   Blog" breaks after "nosso" instead, and below 81px the longest resulting
   line ("NOSSO BLOG") would break again. Combined with text-align: right
   above, both blocks then rag against their icon. */
.ptc-site-footer__icon-link > span:not(.ptc-site-footer__icon-bg) {
	max-width: 105px;
}

.ptc-site-footer__icon-link:hover { opacity: .75; }

.ptc-site-footer__icon-bg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ptc-terracotta);
	color: var(--ptc-white);
	flex-shrink: 0;
}

.ptc-site-footer__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ptc-site-footer__apoio {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--ptc-ink-soft);
}

.ptc-site-footer__apoio img { max-height: 26px; }

/* Footer only, ahead of the shared 880px breakpoint that everything else on
   the page uses. width: auto (above) already keeps the row from being
   forced onto two lines by the logo itself, but the three groups still add
   up to close to .ptc-container's own 1080px content width once a real
   Apoio logo is in place — brand ~360 + links ~330 + apoio ~210 + two 40px
   gaps ≈ 980px, against as little as 900ish px of room on an 1024px-wide
   laptop once the 24px side padding is subtracted. Left alone, that's a
   coin flip between one tight row and one group dropping to a half-empty
   second line depending on exactly how long the apoio text/logo run. Below
   1100px it goes straight to the centred, stacked layout the true mobile
   breakpoint already uses — same declarations, just switched on earlier —
   so the fallback is deliberate at every width instead of an accidental
   wrap only some visitors hit. */
@media (max-width: 1100px) {
	.ptc-site-footer__inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 20px;
	}

	.ptc-site-footer__links { justify-content: center; }
	.ptc-site-footer__apoio { justify-content: center; width: 100%; }
}

.ptc-site-footer__copy {
	margin: 0;
	font-size: 12px;
	color: var(--ptc-ink-soft);
	border-top: 1px solid var(--ptc-cream-2);
	padding-top: 14px;
}

/* Wave divider -------------------------------------------------------------- */

.ptc-wave-divider {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 40px;
	z-index: 3;
	pointer-events: none;
}

.ptc-wave-divider::before { content: ''; position: absolute; inset: 0; }

.ptc-wave-divider--white::before { background: var(--ptc-white); }
.ptc-wave-divider--cream::before { background: var(--ptc-cream); }
.ptc-wave-divider--cream2::before { background: var(--ptc-cream-2); }
.ptc-wave-divider--dark::before { background: var(--ptc-brown-dark); }
.ptc-wave-divider--terracotta::before { background: var(--ptc-terracotta); }
.ptc-wave-divider--parchment::before { background: var(--ptc-parchment); }

.ptc-wave-divider__bump {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(320px, 46vw);
	height: 40px;
	line-height: 0;
}

.ptc-wave-divider__bump svg { width: 100%; height: 100%; display: block; overflow: visible; }

.ptc-wave-divider--mid {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	height: 50px;
}

.ptc-wave-divider--mid .ptc-wave-divider__bump {
	bottom: auto;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(360px, 50vw);
	height: 50px;
}

.ptc-wave-divider--flip .ptc-wave-divider__bump {
	bottom: auto;
	top: 0;
	transform: translate(-50%, 0) rotate(180deg);
	transform-origin: center top;
}

.ptc-wave-divider--tab { height: 60px; }

.ptc-wave-divider--tab .ptc-wave-divider__bump {
	width: min(220px, 30vw);
	height: 60px;
}

.ptc-wave-divider--white .ptc-wave-divider__bump path { fill: var(--ptc-white); }
.ptc-wave-divider--cream .ptc-wave-divider__bump path { fill: var(--ptc-cream); }
.ptc-wave-divider--cream2 .ptc-wave-divider__bump path { fill: var(--ptc-cream-2); }
.ptc-wave-divider--dark .ptc-wave-divider__bump path { fill: var(--ptc-brown-dark); }
.ptc-wave-divider--terracotta .ptc-wave-divider__bump path { fill: var(--ptc-terracotta); }
.ptc-wave-divider--parchment .ptc-wave-divider__bump path { fill: var(--ptc-parchment); }

.ptc-wave-divider__scroll {
	pointer-events: all;
	position: absolute;
	left: 50%;
	top: -14px;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ptc-white);
	color: var(--ptc-brown);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
	transition: transform .2s ease;
}

.ptc-wave-divider__scroll,
.ptc-wave-divider__scroll:visited,
.ptc-wave-divider__scroll:hover,
.ptc-wave-divider__scroll:active { color: var(--ptc-brown); }

.ptc-wave-divider__scroll:hover { transform: translate(-50%, -50%) translateY(4px); }

/* .ptc-wave-divider__scroll svg { width: 20px; height: 20px; } */

/* Shared section utilities -------------------------------------------------- */

.ptc-section { position: relative; padding: 0 0; }

/* white-bg-1035.svg has a real transparent hump cut into its top edge
   (the brand's horn silhouette) and a transparent notch cut into its
   bottom edge — same sheet as .ptc-vozes-how on the Vozes page, same
   fix: the section's real height (padding + the 4-card grid) never
   comes close to the sheet's native 1035px, so a single top-anchored
   background image would show the hump fine (it's near the top) but
   clip the bottom notch away before ever reaching it. Two small
   vw-scaled strips show just the edge each is responsible for, pulled
   to negative z-index so the section's own content stays on top:
   the top hump (64px at the 1920px reference width = 3.34vw) reveals
   the hero above; the bottom notch (38px = 1.98vw) reveals
   .ptc-teaser--first below. No background-color needed here — the
   sheet's own near-white fill matches the page background already. */
.ptc-section--cream {
	position: relative;
	z-index: 3;
	margin-top: calc(-3.34vw * var(--ptc-notch-x));
	margin-bottom: calc(-1.98vw * var(--ptc-notch-x));
	padding: 100px 0;
}

.ptc-section--cream::before,
.ptc-section--cream::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	background-repeat: no-repeat;
	background-size: var(--ptc-notch-scale) auto;
	pointer-events: none;
}

.ptc-section--cream::before {
	top: 0;
	height: clamp(50px, 4.7vw, 100px);
	background-image: url('../images/backgrounds/white-bg-1035.svg');
	background-position: top center;
}

.ptc-section--cream::after {
	bottom: 0;
	height: clamp(30px, 3vw, 65px);
	background-image: url('../images/backgrounds/white-bg-1035.svg');
	background-position: bottom center;
}

.ptc-eyebrow {
	font-family: var(--ptc-font-display);
	font-style: italic;
	color: var(--ptc-terracotta);
	text-align: center;
	font-size: clamp(1.6rem, 3.6vw, 2.2rem);
	margin-bottom: 4rem !important;
}

.ptc-cta-intro {
	max-width: 760px;
	margin: 8px auto 0;
	text-align: center;
	color: var(--ptc-white);
	font-size: 1.05rem;
}

.ptc-lede {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
	color: var(--ptc-ink-soft);
	font-size: 1.05rem;
}

.ptc-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.ptc-cards-grid--4 { margin-top: 40px; }

/* Shape 6's outline was previously replicated via a single mask
   (card-mask.svg) stretched 100%/100% to the card's real (content-
   driven) height — on narrow/tall mobile cards that non-uniform
   stretch distorted the corner curves away from the source vector,
   and let text creep past the visually-narrower rounded corners even
   though it stayed inside the rectangular box.
   Split into two layers instead: ::before is a plain border-radius
   rect (flat top, since nothing above it needs rounding) for the
   stretchy middle/bottom — this never distorts at any height. ::after
   is only the top "wave" — corners + the arch the icon nests into —
   masked from a SEPARATE svg (card-mask-top.svg) that's just that
   slice of the original path, given its own tight viewBox so
   mask-size: 100% 100% never stretches it out of proportion; its box
   is sized with aspect-ratio (not stretched to card height) so the
   wave keeps the source vector's exact proportions at any card width.
   mask and filter:drop-shadow() still go on different elements —
   Chrome renders nothing at all when both are set on the same one. */
.ptc-card {
	position: relative;
	padding: 40px 20px 24px;
	text-align: center;
	filter: drop-shadow(8px 13px 16px rgba(3,0,0,.16));
}

/* top: 0 + bottom: 0 + margin-top (not a plain inset: 0) — this rect
   must start exactly where ::after's wave ends, not cover the full
   card. Both being opaque white and stacked, a full-height ::before
   would sit directly behind ::after's masked-away corner cutouts and
   show through as solid white, erasing the wave's silhouette entirely
   (the actual bug here — the mask itself was rendering correctly).
   margin-top (not top) for that offset because percentage top/height
   resolve against the containing block's HEIGHT, which is auto here
   (content-driven) and therefore invalid per spec — percentage
   margin/padding always resolve against the WIDTH instead, same trick
   ::after's padding-top uses, so both stay in lockstep at any card
   width with no gap or overlap between them. */
.ptc-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* -2px: intentionally overlaps ::after by a couple pixels rather
	   than trying to touch it exactly — the two boxes are sized from
	   independent percentage calculations (padding-top vs margin-top),
	   which can round to different actual pixel values at some widths
	   and leave a 1px seam of the page background showing through.
	   Both layers are opaque white, so a couple px of overlap is
	   invisible either way. */
	margin-top: calc(16.99% - 2px);
	z-index: 0;
	background: var(--ptc-white);
	border-radius: 0 0 28px 28px;
}

.ptc-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	/* padding-top instead of aspect-ratio — percentage padding always
	   resolves against the containing block's WIDTH, a reliable way to
	   size this box at exactly the mask svg's own ratio (58.5/344.3)
	   without depending on aspect-ratio sizing rules for an absolutely
	   positioned, non-replaced element. height stays auto/0-content. */
	padding-top: 16.99%;
	background: var(--ptc-white);
	-webkit-mask-image: url('../images/decor/card-mask-top.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 50% 0%;
	-webkit-mask-size: 100% 100%;
	mask-image: url('../images/decor/card-mask-top.svg');
	mask-repeat: no-repeat;
	mask-position: 50% 0%;
	mask-size: 100% 100%;
}

.ptc-card__icon-img { width: 26px; height: 26px; object-fit: contain; margin: -22px auto 12px; position: relative; z-index: 1; }

.ptc-card h3 {
	position: relative;
	z-index: 1;
	max-width: 88%;
	margin: 0 auto 10px;
	font-family: var(--ptc-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--ptc-terracotta);
	text-transform: uppercase;
}

.ptc-card p { position: relative; z-index: 1; max-width: 88%; font-style: italic; font-size: 14px; color: var(--ptc-ink-soft); margin: 0 auto; }

/* Hero ----------------------------------------------------------------- */

/* svh, with vh kept as the fallback for anything that doesn't know the
   unit: on iOS Safari 100vh is the height the viewport has with the
   address bar and toolbar COLLAPSED, so a 100vh hero is always taller
   than what's actually on screen when the page first loads — the bottom
   of it (and the notch/scroll button sitting in the seam below) starts
   off cut away, and the layout visibly resizes as soon as the user
   scrolls. 100svh is that same measurement taken with the bars showing,
   which is the state the page loads in. */
.ptc-hero {
	position: relative;
	/* Was an inline style on the <section>. In CSS it can carry a phone crop
	   (below) — an inline background-image can't be overridden by a media
	   query, which is why it had to move. */
	background-image: url('../images/home_01.png');
	min-height: 100vh;
	height: 100vh;
	min-height: 100svh;
	height: 100svh;
	display: flex;
	align-items: center;
	color: var(--ptc-white);
	background-size: cover;
	background-position: center bottom;
}

/* Flat overlay (not a bottom-heavy gradient) — .ptc-section--cream pulls
   up over this hero's own bottom edge (margin-top: -3.34vw) to reveal a
   sliver of it through its own top notch, so any unevenness in the
   darkening here would read as a mismatched patch in that reveal. A flat
   tint darkens the same amount everywhere, sliver included, so it stays
   consistent with the rest of the photo instead of standing out. */
.ptc-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, .22);
	pointer-events: none;
}

.ptc-hero__inner { position: relative; z-index: 2; width: 100%; }

.ptc-hero__grid {
	display: flex;
	align-items: center;
	gap: 56px;
}

.ptc-hero__copy {
	flex: 1;
	min-width: 280px;
	text-align: left;
}

.ptc-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-style: italic; color: var(--ptc-white); }
.ptc-hero__lede { font-family: var(--ptc-font-display); font-style: italic; font-size: 1.2rem; }

/* container-type: the caption below sizes itself as a share of this card's
   width (5.08cqw), the way the artwork does, so it can't drift out of
   proportion at any breakpoint. */
.ptc-hero__video-card {
	position: relative;
	container-type: inline-size;
	flex: 1;
	min-width: 280px;
	max-width: 100%;
	border-radius: 28px;
	overflow: hidden;
	background: transparent;
}

/* One ratio for every state of this card, and 16/9 is the one that works.
   Two things had to be true at once: the card must not change size when a
   video is set (it used to be 472/306 empty and 16/9 with a video, so the
   hero jumped), and a film must fill it. At 472/306 the first was true and
   the second wasn't — YouTube letterboxed the film, and cropping the iframe
   to cover instead sliced 7.6% off each side, which is where YouTube draws
   its timecode and its fullscreen button. 16/9 is the only ratio that gets
   both: same box always, film edge to edge, controls whole.
   The cost is hero-video-placeholder-v2.svg, drawn to 472/306, being stretched
   ~15% wider by background-size: 100% 100%. That is a rounded frame and a
   landscape photo, so it carries the stretch; redrawing it at 16/9 would
   remove even that. */
.ptc-hero__video-card img,
.ptc-hero__video-card video,
.ptc-hero__video-embed,
.ptc-hero__video-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* A YouTube/Vimeo link (hero_video_link) is embedded with the real player
   present from the start and the brand poster laid over it — see the note in
   front-page.php on why the old click-to-play facade had to go.
   472/306 (not the 16/9 above) because this box holds two stacked things:
   the film, 16/9, across the top, and under it the strip the artwork leaves
   for the notch line and the caption. The poster svg is drawn to exactly
   these proportions, so it covers both and the two states line up. */
.ptc-hero__video-embed {
	position: relative;
	aspect-ratio: 472 / 306;
}

/* The film sits at the TOP of that box and keeps its own 16/9, so nothing
   letterboxes and — the point of the change — YouTube's controls are never
   under the notch. What is left below it is the caption strip. */
.ptc-hero__video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 28px;
	background: #000;
}

/* Covers the whole box (film + strip), because the poster artwork carries
   its own copy of the notch line and the caption. pointer-events: none is
   the whole trick: the tap lands on the player underneath, so it plays on
   the first tap instead of the second. */
.ptc-hero__video-poster {
	position: absolute;
	inset: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.ptc-hero__video-embed.is-playing .ptc-hero__video-poster {
	opacity: 0;
}

.ptc-hero__video-poster img,
.ptc-hero__video-poster .ptc-hero__video-placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The poster's baked-in notch line, redrawn for when the poster is gone —
   same path, same place, so nothing appears to move as it fades out. Its
   height is the strip left under the 16/9 film, as a share of the box's own
   height: (306 - 472/(16/9)) / 306 = 40.5 / 306. hero-video-chin.svg is
   drawn to exactly that 472x40.5 slice, so 100% 100% lands the curve on the
   pixel the poster had it. */
.ptc-hero__video-embed::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 13.24%;
	background: url('../images/backgrounds/hero-video-chin.svg') no-repeat center;
	background-size: 100% 100%;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.ptc-hero__video-embed.is-playing::after {
	opacity: 1;
}

/* Fallback shown only when no video/photo is configured at all (see
   front-page.php), or as the poster inside .ptc-hero__video-embed when
   a video link is set but no photo was given. hero-video-placeholder-v2.svg
   is its own shaped card — rounded corners with a notch baked in, drawn to
   472x306. The rule above puts every state of this card at 16/9, so
   background-size: 100% 100% stretches it ~15% wider — see the note there. */
.ptc-hero__video-placeholder {
	background: url('../images/backgrounds/hero-video-placeholder-v2.svg') no-repeat center;
	background-size: 100% 100%;
}

.ptc-hero__video-embed .ptc-hero__video-placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
}

/* The card is the brand shape, 472/306, and a film is 16:9 — one of the two
   has to give. Letting the iframe simply fill the box made YouTube letterbox
   the film inside it, which is the black band above and below the picture the
   client flagged. object-fit can't help: it does nothing to an <iframe>.
   So the iframe is sized to COVER instead — matched to the card's height and
   allowed to overrun its width by (16/9) / (472/306) = 15.2%, i.e. 7.6% off
   each side, which .ptc-hero__video-card's overflow: hidden clips. The card
   keeps its proportions, the picture fills it edge to edge, and the crop is
   at the sides, where a 16:9 frame has the most room to spare.
   max-width: none is defensive: nothing caps an iframe today (the reset at
   the top of this file only touches img), but a width over 100% is exactly
   what a future max-width reset would silently undo. */
/* HD on desktop. YouTube picks its quality from the size of the player
   INSIDE the iframe, and this card is capped at 488px wide at every desktop
   width by .ptc-container — small enough that a 640x360 stream already
   covers it, which is the "resolução meia boca" the client saw. So the
   iframe is laid out at 976x549 (the first 16/9 size whose height clears
   480, i.e. the first that makes YouTube reach for 720p) and scaled back
   down onto the card. The picture is then downsampled 2:1 rather than
   upscaled, so it is sharper as well as higher quality; the cost is
   YouTube's own controls rendering at the same 50%.
   --ptc-video-scale is set by main.js from the card's measured width, since
   CSS can't divide a percentage by a pixel length.
   Phones are left alone: the same trick there would shrink the controls to
   ~11px, too small to hit, and a phone-sized player doesn't need 720p. */
@media (min-width: 1025px) {
	.ptc-hero__video-embed iframe {
		width: 976px;
		height: 549px;
		aspect-ratio: auto;
		transform-origin: 0 0;
		transform: scale(var(--ptc-video-scale, 1));
	}
}

.ptc-hero__play {
	position: absolute;
	top: calc(50% - 14px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid var(--ptc-white);
	background: rgba(255,255,255,.2);
	color: var(--ptc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ptc-hero__play svg { width: 22px; height: 22px; }

/* Hidden by default: every other state of this card carries its own caption
   (hero-video-placeholder-v2.svg draws "Assista" into the artwork). It is
   only needed once the poster fades out from over a playing embed, where it
   has to sit exactly where the artwork had it — centred, baseline on the
   box's bottom edge, in the gap the notch opens. 24/472 of the box's width
   is the artwork's own type size, and cqw keeps it that share at any card
   width (the card is the query container). */
.ptc-hero__video-caption {
	display: none;
}

.ptc-hero__video-card:has(.ptc-hero__video-embed) .ptc-hero__video-caption {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font-family: var(--ptc-font-display);
	font-size: 5.08cqw;
	line-height: 1.05;
	color: var(--ptc-white);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.ptc-hero__video-card:has(.ptc-hero__video-embed.is-playing) .ptc-hero__video-caption {
	opacity: 1;
}

/* Teasers ---------------------------------------------------------------- */

/* Notícias (home) -------------------------------------------------------- */

/* The Vozes news feed, which the approved changes move onto the home page,
   between the "Uma nova fase" cards and the teasers. It keeps the peach band
   it had on the Vozes page (#f5efe9) because that is what .ptc-section--cream
   above it reveals through the notch carved into its own bottom edge — on a
   white band that notch would simply disappear. It doesn't need the carved
   sheet and the negative margin it carried before: .ptc-teaser--first below
   has a straight top edge, so there is nothing to overlap into. */
.ptc-vozes-news {
	position: relative;
	background: #f5efe9;
	padding: 90px 0 100px;
	text-align: center;
}

.ptc-vozes-news h2 {
	/* Colour/style came from `.ptc-vozes h2` while the section lived on that
	   page; on the home page there is no such wrapper, so it is spelled out. */
	color: var(--ptc-terracotta);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(2.4rem, 3.9vw, 3.9rem);
	margin-bottom: 28px;
}

.ptc-vozes-news__intro {
	max-width: 640px;
	margin: 0 auto 48px;
	color: var(--ptc-ink);
}

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

.ptc-vozes-news-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);
}

/* Whole-card click target — the visible "Ler notícia" link stays for
   clarity but is aria-hidden/tabindex="-1" so screen readers and keyboard
   nav only see this one, single accessible link per card. */
.ptc-vozes-news-card__stretched-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

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

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

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

.ptc-vozes-news-card__overlay-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba( 0, 0, 0, .55 );
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	opacity: 0;
	transition: opacity .2s ease;
}

.ptc-vozes-news-card:hover .ptc-vozes-news-card__overlay-title {
	opacity: 1;
}

.ptc-vozes-news-card__date {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 8px 18px;
	background: var(--ptc-terracotta);
	color: #fff;
	font-size: .8rem;
	font-weight: 500;
	border-radius: 0 12px 0 0;
}

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

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

.ptc-vozes-news-card__body p {
	font-size: .85rem;
	line-height: 1.55;
	color: var(--ptc-ink-soft);
	margin: 0 0 18px;
}

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

.ptc-vozes-news-card__link-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.ptc-vozes-news-card__link-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ptc-vozes-news__all {
	margin: 48px auto 0;
}


@media (max-width: 1024px) {
	.ptc-vozes-news__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

/* Teasers ------------------------------------------------------------------ */

.ptc-teasers { position: relative; display: grid; grid-template-columns: 1fr; }

.ptc-teaser {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Only home-vozes-teaser-bg.svg (the first teaser) has a real notch
   carved into its own bottom edge (34.91px deep at the 1920px
   reference width = 1.818%, using % rather than vw since this photo
   scales with the section's own width, not the viewport). For that
   notch to reveal the second teaser's photo through it instead of
   just exposing empty space, this one needs the higher z-index and to
   be pulled down over it — home-embaixadores-teaser-bg.svg is a plain
   opaque rectangle, so whatever shows through is always its real
   photo, never a gap. -2.6% (not the exact 1.818%) bakes in a safety
   margin well past the notch's own depth — smaller buffers (-1.95%,
   then -2.3%) still left a hairline gap of whatever's behind the first
   card visible right at the seam on some devices/screen sizes, from
   sub-pixel rounding that a browser's own layout math handles
   slightly differently depending on engine and pixel density. */
.ptc-teaser--first {
	z-index: 2;
	margin-bottom: -2.6%;
}

/* The second teaser shows the territories map now, not a photo shot to the
   card's proportions. The file it points at is already cropped to the
   reference card's 1920x1085 with the island filling the frame — the
   "estourada no quadro" the brief asks for — but the card still needs the
   ratio pinned and object-fit: cover, because the base rule below sizes the
   photo from its own height (height: auto), which the first teaser's taller
   art relies on and this one must not inherit. */
.ptc-teaser--second {
	z-index: 1;
	aspect-ratio: 1920 / 1085;
}

/* The carved bottom edge. Primeira.svg carries this notch in its own alpha,
   which is why the first card has always had it; Segunda.svg was a plain
   rectangle and so is the map crop that replaced it, so the second card lost
   the detail. notch-bottom.svg traces the same path Primeira.svg does, cut
   in here as a mask instead — two layers: the notch sheet across the bottom
   strip, plus a solid block over everything above it, unioned by the default
   add compositing. A single layer would hide everything the sheet doesn't
   reach.
   It goes on the card, not on its <img>, so the scrim in ::after is carved
   too — masking only the photo would leave the scrim painting a dark shape
   across the notch. 6.25vw is the sheet's own 120/1920 height, scaled by the
   same --ptc-notch-x the other seams use, so this holds at every breakpoint.
   What shows through is #fff, the same white as .ptc-cta-heading below.
   The +2px makes the solid block overlap the sheet instead of abutting it:
   at exactly 100% - 6.25vw the two layers meet on a fractional pixel and
   sub-pixel rounding opened a hairline of white straight across the card.
   The sheet is fully opaque along its own top edge, so the overlap only
   doubles up opacity where there already was some. */
.ptc-teaser--second {
	-webkit-mask-image: url('../images/decor/notch-bottom.svg'), linear-gradient(#000, #000);
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-position: bottom center, top center;
	-webkit-mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw + 2px);
	mask-image: url('../images/decor/notch-bottom.svg'), linear-gradient(#000, #000);
	mask-repeat: no-repeat, no-repeat;
	mask-position: bottom center, top center;
	mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw + 2px);
}

.ptc-teaser--second > img,
.ptc-teaser--second > picture > img {
	height: 100%;
	object-fit: cover;
}

/* The map is a light illustration and the overlay copy is white, so the card
   needs the same treatment the header got: darken the background rather than
   put a shadow behind the type. The middle stop is the weakest one and it is
   where the copy block sits, so it sets the floor: over the palest thing the
   card can show (the illustration's own cream margin, #EFE6D8, which survives
   the crop at the left and right edges) 55% of #1C110B leaves white type at
   4.8:1 — past AA, and far higher over the island itself, which is what the
   copy actually sits on. z-index 1 keeps it under .ptc-teaser__overlay (2). */
.ptc-teaser--second::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(28,17,11,.62) 0%, rgba(28,17,11,.55) 45%, rgba(28,17,11,.66) 100%);
	pointer-events: none;
}

/* Direct-child combinator (not just ".ptc-teaser img") — the background
   photo is a direct child of .ptc-teaser, but .ptc-teaser__logo is an
   img too, nested one level deeper inside .ptc-teaser__overlay. Without
   the ">", this rule's higher specificity (a class + an element vs.
   .ptc-teaser__logo's single class) silently overrides that logo's own
   width/height/max-width/max-height — including the mobile override
   below, which blew logo_home_teaser.svg up to full crop-oversized
   width and pushed logo_home_teaser_dois.svg out of view entirely.
   Always the photo's own real aspect ratio — never cropped or forced
   into a shorter box via object-fit — so .ptc-teaser__overlay on top of
   it never hides any of it either. */
.ptc-teaser > img,
.ptc-teaser > picture > img {
	width: 100%;
	height: auto;
	display: block;
}

.ptc-teasers .ptc-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* justify-content: center (not flex-start) — flex-start plus a large
   fixed top padding was meant to clear the photo's own upper portion
   on very tall desktop crops, but on an average-height photo it just
   pushed the copy block down toward the bottom, leaving the top of the
   photo looking empty above it. Centering keeps the block in the
   middle of the photo regardless of exactly how tall that photo
   happens to render at a given viewport width. align-items: center
   handles the horizontal centering (both the block itself and, via
   text-align: center, the text inside it). */
/* Padding-bottom is deliberately bigger than padding-top. Measured off
   the source PSD (01_home.psd, 1920px canvas): the copy block starts 70px
   below the card's top edge and ends 141px above its bottom one, i.e. it
   sits slightly ABOVE the card's centre — the extra room at the bottom is
   what keeps the notch in the card's lower edge clear of the button.
   justify-content: center distributes the leftover space evenly between
   the two paddings, so the asymmetry between them is what reproduces that
   offset at any viewport width. */
.ptc-teaser__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 2.5vw, 52px) clamp(20px, 4vw, 84px) clamp(48px, 8.9vw, 186px);
	text-align: center;
	color: var(--ptc-white);
}

.ptc-teaser--first .ptc-teaser__overlay h3,
.ptc-teaser__overlay--second h3 {
	font-style: italic;
	/* Same measure as the paragraph below it — without a cap the long
	   line ("transformada em ação") ran the full width of the card on one
	   line, where the reference deliberately breaks it after
	   "transformada". That break is what gives the title its three-line
	   block and, with it, the height that fills the card. */
	max-width: clamp(320px, 38.5vw, 760px);
	margin: 0 0 clamp(18px, 2.3vw, 48px);
	text-align: center;
}

/* max-width matches the PSD's own copy column (~740px on its 1920px
   canvas) — it's what makes "transformada em ação" break after
   "transformada" the way the reference does, and what keeps the body copy
   at the same measure as the heading above it. The old 560px was narrow
   enough to wrap the paragraph into an extra line and leave the block
   looking like a thin strip in the middle of the photo. */
.ptc-teaser--first .ptc-teaser__overlay p,
.ptc-teaser__overlay--second .ptc-teaser__lead,
.ptc-teaser__overlay--second p:not(.ptc-teaser__lead) {
	font-size: clamp(1rem, 1.345vw, 1.62rem);
	line-height: 1.47;
	max-width: clamp(320px, 38.5vw, 760px);
	margin: 0 0 clamp(16px, 2.2vw, 46px);
	text-align: center;
}

.ptc-teaser__overlay--second .ptc-teaser__lead {
	font-weight: 700;
	margin-bottom: clamp(8px, .9vw, 19px);
}

.ptc-teaser--first .ptc-teaser__overlay .ptc-btn,
.ptc-teaser__overlay--second .ptc-btn { margin-top: clamp(8px, 1.2vw, 25px); }

/* The teaser pill is the one place the reference draws the button at full
   size — 301×75 with a 55px icon circle on its 1920px canvas, against the
   240×50/36px the shared .ptc-btn--light uses everywhere else. At the
   shared size it read as a small chip floating under type that is now
   three times taller than it. Capped so it stops growing past the
   reference size on very wide screens. */
.ptc-teaser .ptc-btn {
	width: clamp(200px, 15.7vw, 310px);
	min-height: clamp(44px, 3.9vw, 78px);
	padding: 5px 5px 5px clamp(16px, 1.7vw, 36px);
	gap: clamp(8px, .7vw, 15px);
	font-size: clamp(.9rem, 1.28vw, 1.55rem);
}

.ptc-teaser .ptc-btn__icon {
	width: clamp(32px, 2.87vw, 57px);
	height: clamp(32px, 2.87vw, 57px);
	/* 36% keeps the arrow at the same proportion of the circle it has at
	   the shared 36px size (13px), now that the circle itself scales. */
	background-size: 36% auto, auto;
}

/* Fluid, not the old flat 250px box. The PSD renders the Vozes wordmark
   at 293×98 and the Embaixador seal at 254×247 on a 1920px canvas —
   15.3vw / 13vw hits both of those at 1920 (the wide wordmark is capped
   by the width, the near-square seal by the height) and scales them
   together on anything narrower, instead of staying pinned at a size
   that only looked right on one screen.
   margin-bottom likewise: 3.6vw ≈ the 69px gap the reference leaves
   between the mark and the title — the fixed 4rem read as cramped once
   the title grew to its real size. */
.ptc-teaser__logo {
	max-width: clamp(150px, 15.3vw, 330px);
	max-height: clamp(120px, 13vw, 280px);
	width: auto;
	height: auto;
	margin: 0 0 clamp(24px, 3.6vw, 75px);
	object-fit: contain;
}

/* Two sizes, one heading: the PSD sets the first line of every display
   heading at ~74px and the rest at ~108px on its 1920px canvas ("A voz do
   campo" / "transformada em ação", "Embaixadores" / "Territoriais").
   ptc_display_title_html() wraps each line in a .ptc-display-line span so
   the two can be sized independently — a single font-size on the h3 could
   only ever flatten them into one. */
.ptc-teaser h3 { font-style: italic; }

.ptc-display-line {
	display: block;
	font-size: clamp(2.6rem, 5.62vw, 6.75rem);
	line-height: .92;
}

.ptc-display-line--lead {
	font-size: clamp(1.9rem, 3.85vw, 4.62rem);
	line-height: 1;
}

/* CTA section -------------------------------------------------------------- */

/* Own white section for the heading, straddled by .ptc-cta-grid below —
   the grid is pulled up out of .ptc-cta-contact-wrap with a negative
   margin-top that reaches back into this section's own bottom padding,
   so the top slice of each card sits on this white background and the
   rest sits on the orange one. Its own padding-bottom just needs to
   clear the eyebrow text by more than that overlap so the cards never
   cover it; the overlap amount itself lives on .ptc-cta-grid, kept in
   lockstep with .ptc-cta-card's min-height at each breakpoint below. */
/* Tightened from 200/270 on the client's note that the heading floated too
   far from the sections above and below it. Both gaps are now ~half what
   they were.
   padding-bottom does NOT set the card overlap, so tightening it leaves the
   42% straddle documented on .ptc-cta-grid untouched: the cards hang off
   .ptc-cta-grid's own margin-top and .ptc-cta-contact-wrap's padding-top,
   both measured from this section's bottom EDGE, which this padding moves
   along with everything else (verified at 219px before and after).
   What it does set is the white space between the copy and the top of the
   cards, and three things stack up there, not two: this padding, then
   .ptc-container's own 4rem margin-bottom, then the grid's -220px. So the
   gap a reader sees is 212 + 64 + 1 - 220 = 57px, not 212 - 220. */
.ptc-cta-heading {
	position: relative;
	background-color: var(--ptc-white);
	text-align: center;
	padding: 96px 0 212px;
}

.ptc-cta-heading .ptc-eyebrow { margin: 0; }

/* .ptc-cta-intro is coloured for the rust contact band it was written for
   (--ptc-white); this section's background is white, so the copy the client
   added here — the COP30 paragraph — needs the page's own ink instead, or it
   renders invisible. */
.ptc-cta-heading .ptc-cta-intro {
	margin: 16px auto 0;
	color: var(--ptc-ink-soft);
	line-height: 1.6;
}

.ptc-cta-contact-wrap {
	/* Identical to .ptc-vozes-contact and .ptc-ambassadors-contact: the same
	   photo under the same rust wash, anchored bottom centre. */
	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;
	color: var(--ptc-white);
	/* padding-top: 1px (not 0) so .ptc-cta-grid's negative margin-top
	   below doesn't collapse straight through into this section's own
	   margin — without it, that negative margin drags this whole
	   section's box up with it instead of just letting the grid poke up
	   out of it, collapsing the overlap with .ptc-cta-heading down to
	   nothing (same fix as .ptc-ambassadors-contact in embaixadores.css,
	   just guarding a negative child margin instead of a positive one). */
	padding: 1px 0 120px;
	overflow: visible;
}
.ptc-cta-contact-wrap .ptc-eyebrow { color: var(--ptc-terracotta); }

/* margin-top pulls the whole grid up out of .ptc-cta-contact-wrap (which
   has overflow: visible for exactly this) and into .ptc-cta-heading's
   bottom padding above, so ~42% of every .ptc-cta-card's min-height
   (see the matching figure in each breakpoint below) reads as sitting
   on the white heading section and the rest on the orange one. */
.ptc-cta-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	max-width: 800px;
	margin: -220px auto -80px;
}

.ptc-cta-card {
	position: relative;
	border-radius: 44px;
	overflow: hidden;
	min-height: 520px;
	background-color: var(--ptc-brown);
	display: flex;
	transform: translateZ(0);
	isolation: isolate;
}

.ptc-cta-card__img,
.ptc-cta-card::before,
.ptc-cta-card__overlay {
	border-radius: 44px;
}

.ptc-cta-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ptc-cta-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,15,12,.1) 0%, rgba(20,15,12,.85) 100%);
	z-index: 1;
}

.ptc-cta-card__overlay {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 100%;
	padding: 48px 24px 40px;
	text-align: center;
	color: var(--ptc-white);
}

.ptc-cta-card__eyebrow {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	margin: 0;
}

.ptc-cta-card h3 {
	font-style: italic;
	font-size: 1.6rem;
	line-height: 1.05;
	white-space: pre-line;
	margin: auto 0;
}

.ptc-cta-card .ptc-btn {
	width: 100%;
	max-width: 220px;
	min-height: 44px;
	padding-left: 18px;
	font-size: 15px;
	justify-content: center;
	margin-top: 0;
}

/* Forms -------------------------------------------------------------------- */

/* background-position: bottom (not center) — home-cta-contact-shared-bg.png
   has a blank margin baked into its own top ~32%. On desktop's wide/
   short crop there's enough vertical room to crop past it either way,
   but on mobile's narrow/tall crop, cover has to height-match the
   image (no vertical room left to shift), so it shows the image's
   full height edge to edge — margin included, right at the top —
   unless anchored to the bottom like this instead. */
.ptc-contact-form {
	position: relative;
	background: linear-gradient(180deg, rgba(151,75,54,.55) 0%, rgba(128,60,40,.65) 100%), url('../images/home-cta-contact-shared-bg.png');
	background-size: cover;
	background-position: bottom;
	color: var(--ptc-white);
	padding: 120px 0 80px;
	text-align: center;
}

.ptc-contact-form--transparent { background: none; padding-top: 120px; }

.ptc-contact-form__heading { color: var(--ptc-white); font-style: italic; margin-top: 60px; margin-bottom: 60px }

.ptc-form { max-width: 760px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 16px; }

.ptc-field-row { display: flex; gap: 16px; }
.ptc-field-row .ptc-field { flex: 1; }
.ptc-field-hp { position: absolute; left: -9999px; }

.ptc-form input[type="text"],
.ptc-form input[type="email"],
.ptc-form select,
.ptc-form textarea {
	width: 100%;
	padding: 16px 20px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.5);
	background: rgba(255,255,255,.08);
	color: var(--ptc-white);
	font-family: var(--ptc-font-body);
	font-size: 14px;
}

.ptc-form input[type="text"]:focus,
.ptc-form input[type="email"]:focus,
.ptc-form select:focus,
.ptc-form textarea:focus {
	outline: none;
	border-color: rgba(255,255,255,.85);
}

.ptc-form select { appearance: none; }
.ptc-form select option { color: var(--ptc-ink); }
.ptc-form ::placeholder { color: rgba(255,255,255,.85); }
.ptc-form textarea { resize: none; min-height: 120px; }

.ptc-form .ptc-btn {
	align-self: center;
	width: 100%;
	max-width: 260px;
	min-height: 40px;
	padding: 6px 6px 6px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.5);
	background: rgba(255,255,255,.08);
	color: var(--ptc-white);
	font-family: var(--ptc-font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease;
	justify-content: center;
}

.ptc-form .ptc-btn:hover { background: rgba(255,255,255,.2); }
.ptc-form .ptc-btn .ptc-btn__icon { display: none; }

.ptc-form-notice {
	max-width: 760px;
	margin: 0 auto 24px;
	padding: 14px 20px;
	border-radius: 12px;
	font-size: 14px;
}

.ptc-form-notice--success { background: rgba(255,255,255,.15); }
.ptc-form-notice--error { background: rgba(0,0,0,.25); }

/* Scroll-reveal animations ------------------------------------------------- */

.ptc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: var(--ptc-reveal-delay, 0s);
}

.ptc-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Safari-only bug: filter: drop-shadow() combined with a TRANSFORM
   transition on the same element mis-rasterizes the shadow once the
   transition ends — the drop-shadow keeps tracing the pre-transition
   outline instead of the settled one, reading as a shadow that's
   "correct on load, then clipped." This is a different WebKit bug
   from the two already handled in main.js (font-load reflow, mask
   image loading late) — those force a repaint AFTER the fact, but
   this one is triggered by the transform transition itself, on
   Safari specifically, no reflow required.
   .ptc-card, .ptc-vozes-step, .ptc-vozes-deliverable,
   .ptc-ambassadors-action and .ptc-ambassadors-step are the only
   .ptc-reveal elements that also carry drop-shadow (see each of their
   own rules), so only they swap the slide-in from `transform` to
   `top` — a layout-offset property, not a compositor transform, so it
   never engages the bug. Safe to use `top` here (no layout shift
   ripple to siblings) because every one of these five is already
   `position: relative` for its own ::before/::after shape layers. */
.ptc-card.ptc-reveal,
.ptc-vozes-step.ptc-reveal,
.ptc-vozes-deliverable.ptc-reveal,
.ptc-ambassadors-action.ptc-reveal,
.ptc-ambassadors-step.ptc-reveal {
	top: 28px;
	transform: none;
	transition-property: opacity, top;
}

.ptc-card.ptc-reveal.is-visible,
.ptc-vozes-step.ptc-reveal.is-visible,
.ptc-vozes-deliverable.ptc-reveal.is-visible,
.ptc-ambassadors-action.ptc-reveal.is-visible,
.ptc-ambassadors-step.ptc-reveal.is-visible {
	top: 0;
}

.ptc-cards-grid .ptc-reveal:nth-child(1) { --ptc-reveal-delay: 0s; }
.ptc-cards-grid .ptc-reveal:nth-child(2) { --ptc-reveal-delay: .08s; }
.ptc-cards-grid .ptc-reveal:nth-child(3) { --ptc-reveal-delay: .16s; }
.ptc-cards-grid .ptc-reveal:nth-child(4) { --ptc-reveal-delay: .24s; }

.ptc-teasers .ptc-reveal:nth-child(2) { --ptc-reveal-delay: .12s; }
.ptc-cta-grid .ptc-reveal:nth-child(2) { --ptc-reveal-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
	.ptc-reveal { opacity: 1; transform: none; transition: none; }
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Between the phone breakpoint and full desktop, .ptc-teaser was still
	   sized by the photo's own very wide 1920:1085 ratio — 426px tall at a
	   753px-wide tablet, against roughly 440px of logo + title + copy +
	   button. The overlay is position: absolute; inset: 0, so the surplus
	   didn't push the card taller, it just rendered outside it: the mark at
	   the top and the button at the bottom were both cut off.
	   Here the card is driven by its content instead — the overlay goes
	   back into normal flow and the photo covers whatever height that comes
	   to. Because the box is now TALLER than the photo's natural ratio,
	   object-fit: cover crops it left/right only, so the notch along its
	   bottom edge survives intact, which is the same thing the 212%-width
	   trick achieves on phones (below) without having to solve for a fixed
	   ratio the copy has to fit inside.
	   The overlap below is deliberately generous: it only has to be at
	   least as deep as that notch for the second card to show through it,
	   and anything deeper simply slides the second card further under the
	   first one, which is opaque there anyway. A single % can't track the
	   notch's real depth once the card's height is content-driven, so
	   erring long is the reliable choice. */
	.ptc-teaser {
		display: flex;
		aspect-ratio: auto;
	}

	.ptc-teaser > img,
	.ptc-teaser > picture > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ptc-teaser__overlay {
		position: relative;
		inset: auto;
		flex: 1;
		min-height: 46vw;
	}

	.ptc-teaser--first {
		margin-bottom: -5vw;
	}

	.ptc-hero h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
	.ptc-hero__grid { gap: 32px; }
	.ptc-hero__video-card { flex-basis: 280px; }

	.ptc-cta-card { min-height: 460px; }
	.ptc-cta-heading { padding-bottom: 186px; }
	.ptc-cta-grid { margin-top: -195px; }
}

@media (max-width: 880px) {
	/* 2.6x turns the deep notch from 12px into ~33px at a 375px screen —
	   enough to actually cradle the scroll button — and the shallow one from
	   7px into ~19px. See the note on --ptc-notch-scale in :root. */
	:root {
		--ptc-notch-scale: 260%;
		--ptc-notch-x: 2.6;
	}

	.ptc-nav { position: fixed; z-index: 101; top: 0; right: 0; bottom: auto; left: auto; width: min(320px, 85vw); min-height: 100vh; min-height: 100dvh; background: var(--ptc-brown-dark); padding: 100px 32px 32px; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
	.ptc-nav.is-open { transform: translateX(0); visibility: visible; }
	.ptc-nav__list { flex-direction: column; gap: 20px; }
	.ptc-nav-toggle { display: flex; position: relative; z-index: 102; }

	/* .ptc-nav is position: fixed at this breakpoint (off-canvas drawer,
	   above), which takes it out of the flex flow entirely — .ptc-site-
	   header__inner's only real flex children here are the logo and the
	   toggle button, so justify-content: space-between (desktop) already
	   pins the logo left and the toggle right. Centering the logo instead
	   means taking IT out of flow too (position: absolute, centered on
	   both axes against the header's own box) and letting the toggle
	   become the sole flex child — justify-content: flex-end keeps that
	   one pinned to the right where it always was, instead of sliding to
	   the left the way a lone space-between child otherwise would. */
	.ptc-site-header__inner {
		position: relative;
		justify-content: flex-end;
	}

	.ptc-site-header__logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 44px of artwork — the same mark size this rendered before the file was
	   cropped, when 76px of box held a 43px mark. */
	.ptc-site-header__logo img {
		height: 44px;
		max-height: 44px;
	}

	/* Reverted the earlier contain/letterbox attempt here: unlike the
	   page-hero sections (a photo with text absolutely overlaid on
	   top), this hero already has real in-flow content beside the
	   photo (.ptc-hero__grid: copy + video card, stacked via padding,
	   not a forced min-height inflated just to make room for text) —
	   the background photo isn't being squeezed into an artificially
	   tall empty box the way the others were, so cover doesn't produce
	   the same fake-letterbox look. Left as cover. */
	.ptc-hero {
		min-height: auto;
		padding: 140px 0 100px;
	}
	.ptc-hero__grid { flex-direction: column; }
	.ptc-hero__copy { text-align: center; }

	/* flex-basis: 280px is set at the 1024px breakpoint to give the card its
	   WIDTH while the grid is still a row. Here the grid turns into a column,
	   and flex-basis follows the main axis — so that same 280px started
	   setting the card's HEIGHT instead. The placeholder inside it is only
	   ~182px tall at phone width (472/306), leaving ~98px of empty card
	   between the video and the copy below it. auto lets the card be as tall
	   as what it holds; the hero centres the block, so the video also settles
	   lower on the screen, which is the other half of what was asked. */
	.ptc-hero__video-card { flex-basis: auto; }

		/* The notch that used to be cut into the artwork itself. The phone
		   crops the client supplied are flat JPEGs with no transparency, so
		   the seam lost its relief; this cuts the same shape back in with a
		   mask. Two layers: the notch sheet across the top (or bottom) strip,
		   plus a solid block covering the rest of the image, unioned by the
		   default add compositing — a single-layer mask would hide everything
		   the sheet doesn't reach. 6.25vw is the sheet's own 120/1920 height,
		   scaled by the same --ptc-notch-x the seams use. */
	.ptc-teaser--first > img,
	.ptc-teaser--first > picture > img {
		-webkit-mask-image: url('../images/decor/notch-bottom.svg'), linear-gradient(#000, #000);
		-webkit-mask-repeat: no-repeat, no-repeat;
		-webkit-mask-position: bottom center, top center;
		-webkit-mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw + 2px);
		mask-image: url('../images/decor/notch-bottom.svg'), linear-gradient(#000, #000);
		mask-repeat: no-repeat, no-repeat;
		mask-position: bottom center, top center;
		mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw + 2px);
	}

	/* With the notch cut back in, the cards overlap again so it reveals the
	   second one's photo, the way they do on desktop. */
	.ptc-teaser--first {
		margin-bottom: calc(-1.82vw * var(--ptc-notch-x));
	}

	/* Phone crop of the hero photo — the 9:16 version the client supplied. */
	.ptc-hero {
		background-image: url('../images/mobile/home_banner.jpg');
	}
	.ptc-hero__video-card { width: min(340px, 80%); }

	.ptc-section { padding: 56px 0; }

	/* clamp(30px, 3vw, 65px)'s vw term only clears its own 30px floor
	   above ~1000px viewport width (30 / 0.03) — every phone-width
	   screen was pinned at that fixed 30px minimum, well under the
	   ~40-65px this renders at on real desktop widths. Locking it to
	   the middle of that desktop range instead keeps this seam reading
	   as the same size at both breakpoints, not visibly thinner on
	   mobile. */
	.ptc-section--cream::after {
		height: 55px;
	}

	.ptc-cards-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
	.ptc-cards-grid--4 { margin-top: 32px; }


	/* 64 (container) + 111 + 56 (this breakpoint gives .ptc-section, and so
	   .ptc-cta-contact-wrap, a 56px padding-top instead of the 1px it has on
	   desktop) - 175 = 56px, the same gap as the wide layout. */
	.ptc-cta-heading { padding: 56px 0 111px; }
	.ptc-cta-grid { grid-template-columns: 1fr; margin-top: -175px; }

	/* Mobile keeps the same absolute-overlay photo card as desktop (photo
	   as the card's real background, copy on top of it via the gradient
	   ::before) — an earlier version split this into a stacked
	   photo-then-caption flow instead, which no longer read as a
	   background photo at all. .ptc-cta-card__overlay was already a
	   normal in-flow flex item here (not absolutely positioned), so the
	   card's own min-height (set per breakpoint above) is just a floor:
	   it still grows to fit the copy at any width, so no mobile-only
	   sizing override is needed. */

	.ptc-field-row { flex-direction: column; }

	.ptc-site-footer { padding: 44px 0 18px; }
	.ptc-site-footer__inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; }
	/* 32px of artwork — what 56px of the old padded canvas drew here. */
	.ptc-site-footer__logo img { max-height: 32px; width: auto; }
	.ptc-site-footer__links { justify-content: center; }
	.ptc-site-footer__apoio { justify-content: center; width: 100%; }
}

@media (max-width: 480px) {
	.ptc-site-header { padding: 24px 0; }

	.ptc-hero { padding: 120px 0 80px; }

	.ptc-card { padding: 44px 20px 26px; }
	.ptc-cards-grid { grid-template-columns: 1fr; }


	/* 64 + 98 + 56 - 170 = 48px. */
	.ptc-cta-heading { padding: 48px 0 98px; }
	.ptc-cta-grid { margin-top: -170px; }

	/* The 6vw clamp shrinks these down to their 40px floor on phones,
	   which reads as too small a tap target — bumped back up, mobile
	   only (desktop/tablet keep the clamped size). */
	.ptc-scroll-top,
	.ptc-scroll-down {
		width: 52px;
		height: 52px;
	}

	.ptc-eyebrow {
		margin-bottom: 0 !important;
	}

	/* Desktop's photo is full viewport width, so its own natural aspect
	   ratio (width: 100%; height: auto, base rule above) already renders
	   tall enough to hold the copy comfortably. A phone-width photo at
	   that same natural ratio comes out far shorter in absolute px, too
	   short to read as a real photo with copy overlaid on it — mobile
	   only, .ptc-teaser gets a taller aspect-ratio box instead of the
	   photo's own ratio (5:6 — the logo + title + body copy + button
	   together run close to 390px tall even at these reduced mobile
	   sizes, so anything shorter than that has no padding value that
	   avoids clipping something regardless of justify-content), and the
	   photo is oversized just enough to still completely fill that box
	   with zero vertical cropping (212% width is the exact scale where
	   the photo's own height matches a 5:6 box's height at any viewport
	   width — see the math in the comment on .ptc-teaser--first's
	   margin-bottom below): only the sides get cropped, so the photo
	   still reads as complete top-to-bottom, notch included, just
	   narrower left-right. Text stays overlaid directly on the photo
	   (.ptc-teaser__overlay keeps its base position: absolute; inset: 0
	   — no override needed here). */
	.ptc-teaser {
		aspect-ratio: 5 / 6;
	}

	/* The 212%-width trick this replaces was solved for the LANDSCAPE art
	   (1920x1085): blow it up until its own height matches a 5:6 box, crop
	   the sides only, keep the notch along its bottom edge intact. Below
	   880px the <picture> now serves a 9:16 portrait crop instead, and that
	   same 212% renders it 1413px tall inside a 450px box — a thin slice out
	   of the middle of the photo, which is the opposite of what a portrait
	   crop is for. These files are plain rectangles with no notch cut into
	   them, so there is nothing left to protect: cover fills the box and
	   crops the long side, which for a 9:16 source in a 5:6 box is a small
	   trim off the top and bottom. */
	.ptc-teaser > img,
	.ptc-teaser > picture > img {
		position: absolute;
		inset: 0;
		margin: 0;
		max-width: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Overlap comes from the 880px block, where the notch is masked back into
	   the phone crop — the two have to stay in step. */

	/* justify-content: center (overriding the base rule's flex-start,
	   which packs everything against the top padding) — desktop's photo
	   is tall enough that flex-start vs. center barely shows; mobile's
	   shorter box left a noticeably empty gap below the button with
	   flex-start once the box grew tall enough (5:6, above) to
	   comfortably fit the copy without cropping it. Centering
	   distributes that extra room evenly above and below instead —
	   padding-top a bit larger than padding-bottom then nudges that
	   centered block slightly lower still, since the space flex centers
	   into is measured from the padding edges inward, not the box
	   edges. */
	.ptc-teaser__overlay {
		padding: 32px 24px 24px;
		justify-content: center;
	}

	.ptc-teaser--first .ptc-teaser__overlay p {
		font-size: 15px;
		line-height: 1.45;
		margin: 0 0 14px;
	}

	/* The phone card is a fixed 5:6 box (see the note above), so
	   everything inside it has to add up to less than that box — the
	   desktop sizes, scaled by their vw terms, come out about 50px too
	   tall at 375px wide and pushed the button off the bottom edge of the
	   second teaser. These are the trimmed phone values: same order and
	   proportions, just tightened enough to fit with room to spare. */
	.ptc-teaser__logo {
		max-width: 170px;
		max-height: 95px;
		margin: 0 0 20px;
	}

	.ptc-display-line {
		font-size: 2.2rem;
		line-height: .95;
	}

	.ptc-display-line--lead {
		font-size: 1.5rem;
	}

	.ptc-teaser--first .ptc-teaser__overlay h3,
	.ptc-teaser__overlay--second h3 {
		margin-bottom: 14px;
	}

	/* logo_home_teaser_dois.svg is a near-square badge (264×257), unlike
	   the first teaser's wide wordmark (295×100) — the shared max-height
	   above is the width-based constraint's floor for that wide logo,
	   but it's what actually CAPS this one's size (a square shape fitted
	   to a wide/short box is limited by the shorter side), rendering it
	   smaller on screen than the first logo despite the same
	   max-width/max-height numbers. Its own taller box fixes that. */
	.ptc-teaser__overlay--second .ptc-teaser__logo {
		max-width: 100px;
		max-height: 100px;
	}

	.ptc-teaser__overlay--second .ptc-teaser__lead,
	.ptc-teaser__overlay--second p:not(.ptc-teaser__lead) {
		font-size: 15px;
		line-height: 1.45;
		margin: 0 0 14px;
	}

	.ptc-teaser__overlay--second .ptc-teaser__lead {
		margin-bottom: 8px;
	}

	/* Smaller than the site-wide .ptc-btn--light default (48px tall,
	   fixed 240px wide) — with the extra padding above giving the photo
	   more room to actually read as a background, the full-size pill
	   read as disproportionately large on a phone-width card. */
	.ptc-teaser .ptc-btn {
		min-height: 36px;
		width: 160px;
		padding: 3px 3px 3px 16px;
		gap: 8px;
		font-size: 13px;
		margin-top: 4px;
	}

	.ptc-teaser .ptc-btn__icon {
		width: 26px;
		height: 26px;
	}
}

/* Blog (home.php) and single post (single.php) --------------------------- */

/* These two are the only templates with no photograph behind the header.
   Everywhere else the header floats over a hero (position: absolute) and the
   scrim on ::before darkens that photo under the white logo; here there is
   nothing to darken, so the scrim just lays a grey wash over the top of a
   white page and the content still has to dodge a header it can't see.
   Both problems come from the same cause, so both are fixed the same way:
   the header takes its own opaque background and joins the normal flow, which
   means the page below simply starts under it — no magic clearance value to
   keep in step with the logo's own clamped height. */
body.blog .ptc-site-header,
body.single-post .ptc-site-header {
	position: relative;
	background: var(--ptc-terracotta);
	padding: 16px 0;
}

body.blog .ptc-site-header::before,
body.single-post .ptc-site-header::before {
	opacity: 0;
}

/* .ptc-container traz margin-bottom: 4rem, e o header usa essa classe no seu
   inner. Nas demais páginas o header é position: absolute e a margem não
   ocupa nada; aqui ele está no fluxo, então esses 64px viravam uma faixa de
   cor vazia — sozinhos, quase metade da altura do bloco. */
body.blog .ptc-site-header__inner,
body.single-post .ptc-site-header__inner {
	margin-bottom: 0;
}

/* Nas outras páginas o logo é dimensionado para se impor sobre uma foto de
   hero de tela cheia; aqui ele abre uma faixa sólida no topo de uma página de
   texto, onde essa mesma altura vira um bloco de cor sem conteúdo antes de o
   leitor chegar ao artigo. Cerca de metade da altura basta. */
body.blog .ptc-site-header__logo img,
body.single-post .ptc-site-header__logo img {
	height: clamp(44px, 3.2vw, 74px);
}

/* O hover padrão do menu é a própria terracota (main.css, .ptc-nav__list a
   :hover) — legível sobre foto, invisível sobre a faixa terracota destas
   páginas. Trocado pelo creme da marca. */
body.blog .ptc-nav__list a:hover,
body.single-post .ptc-nav__list a:hover {
	color: var(--ptc-cream);
}

.ptc-blog {
	padding: 70px 0 100px;
}

.ptc-blog__title {
	text-align: center;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	margin-bottom: 48px;
}

.ptc-blog__pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 56px;
	font-family: var(--ptc-font-body);
	font-weight: 600;
}

.ptc-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 999px;
	color: var(--ptc-ink);
}

.ptc-blog__pagination .page-numbers.current {
	background: var(--ptc-terracotta);
	color: var(--ptc-white);
}

/* A capa era full-bleed em 16/7. Duas coisas davam errado: numa página de
   texto ela virava uma faixa de borda a borda sem relação com a coluna do
   artigo, e 16/7 é um recorte severo — a primeira foto enviada pelo cliente
   é quase quadrada (958x924) e teve as cabeças cortadas. Agora ela é um
   card centrado, um pouco mais largo que o texto para ter presença, com o
   mesmo raio e a mesma sombra dos cards de notícia. 3/2 mantém o formato
   consistente entre posts (o layout não pula conforme a foto) sem cortar
   tanto quanto 16/7. */
/* overflow-x: clip por causa do .alignfull do editor: ele usa 100vw, que
   inclui a barra de rolagem, e sobra alguns pixels para fora da janela dos
   dois lados. Medido: 8px de transbordo. Sem isso, dependendo do navegador,
   aparece uma barra de rolagem horizontal na pagina inteira. clip (e nao
   hidden) para nao criar um contexto de rolagem novo. */
.ptc-post {
	overflow-x: clip;
}

.ptc-post__hero {
	width: min(100% - 48px, 900px);
	margin: 40px auto 0;
	aspect-ratio: 3 / 2;
	max-height: 560px;
	overflow: hidden;
	border-radius: var(--ptc-radius);
	box-shadow: 0 14px 34px rgba(43, 32, 27, .1);
}

.ptc-post__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ptc-post__inner {
	max-width: 760px;
	padding-top: 56px;
	padding-bottom: 100px;
}

/* No extra clearance needed any more — the header is in the flow on this
   template (see body.single-post above). */
.ptc-post:not(:has(.ptc-post__hero)) .ptc-post__inner {
	padding-top: 56px;
}

.ptc-post__back {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--ptc-terracotta);
	font-weight: 600;
	font-size: .9rem;
}

.ptc-post__back:hover { text-decoration: underline; }

.ptc-post__date {
	display: block;
	color: var(--ptc-ink-soft);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.ptc-post__title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin-bottom: 28px;
}

/* Conteúdo de um post ----------------------------------------------------
   Tudo abaixo é para o que o editor do WordPress produz. Quem escreve não
   controla CSS: só aperta negrito, cria uma lista, insere uma imagem. Antes
   existiam regras apenas para p, img e h2/h3 — lista, citação, tabela,
   legenda, link e vídeo saíam no estilo cru do navegador, fora da identidade
   do site. Por isso esta folha cobre cada elemento que o editor pode gerar,
   e não só os que os primeiros posts usaram. */
.ptc-post__content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ptc-ink);
}

/* Floats de imagem (.alignleft/.alignright) não podem vazar para o rodapé. */
.ptc-post__content::after {
	content: '';
	display: block;
	clear: both;
}

/* O primeiro e o último elemento não brigam com o espaçamento da coluna,
   seja ele parágrafo, título ou imagem. */
.ptc-post__content > *:first-child { margin-top: 0; }
.ptc-post__content > *:last-child { margin-bottom: 0; }

.ptc-post__content p { margin: 0 0 1.4em; }

/* Texto ------------------------------------------------------------------ */

.ptc-post__content strong,
.ptc-post__content b {
	font-weight: 700;
	color: var(--ptc-brown-dark);
}

.ptc-post__content em,
.ptc-post__content i { font-style: italic; }

.ptc-post__content a {
	color: var(--ptc-terracotta);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.ptc-post__content a:hover { color: var(--ptc-terracotta-dark); }

.ptc-post__content mark {
	background: var(--ptc-cream-2);
	color: inherit;
	padding: 0 .2em;
}

.ptc-post__content small {
	font-size: .85em;
	color: var(--ptc-ink-soft);
}

.ptc-post__content sub,
.ptc-post__content sup { font-size: .72em; line-height: 0; }

/* Títulos ---------------------------------------------------------------- */

/* h1 é o título do post (.ptc-post__title); dentro do texto o editor começa
   em h2, então a escala aqui parte de baixo dele. */
.ptc-post__content h2,
.ptc-post__content h3 {
	font-family: var(--ptc-font-display);
	color: var(--ptc-brown-dark);
	line-height: 1.25;
}

.ptc-post__content h2 {
	font-size: clamp(1.5rem, 2.6vw, 1.95rem);
	margin: 1.9em 0 .55em;
}

.ptc-post__content h3 {
	font-size: clamp(1.25rem, 2.1vw, 1.5rem);
	margin: 1.6em 0 .5em;
}

.ptc-post__content h4 {
	font-family: var(--ptc-font-body);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ptc-terracotta);
	margin: 1.6em 0 .5em;
}

/* Listas ----------------------------------------------------------------- */

/* Marcador desenhado no ::before, não o do navegador, para seguir o mesmo
   desenho já usado nas listas da Carta Aberta e do Chamado à Ação. */
.ptc-post__content ul,
.ptc-post__content ol {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .55em;
}

.ptc-post__content li {
	position: relative;
	padding-left: 1.5em;
}

.ptc-post__content ul > li::before {
	content: '\2022';
	position: absolute;
	left: .3em;
	top: 0;
	color: var(--ptc-terracotta);
	font-weight: 700;
}

.ptc-post__content ol { counter-reset: ptc-post-ol; }

.ptc-post__content ol > li { counter-increment: ptc-post-ol; }

.ptc-post__content ol > li::before {
	content: counter(ptc-post-ol) '.';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ptc-terracotta);
	font-weight: 700;
}

/* Aninhadas: traço em vez de ponto, para diferenciar do nível de cima sem
   inventar um segundo símbolo. */
.ptc-post__content li > ul,
.ptc-post__content li > ol { margin: .55em 0 0; }

.ptc-post__content li > ul > li::before {
	content: '\2013';
	left: .25em;
}

/* Citação ---------------------------------------------------------------- */

.ptc-post__content blockquote {
	margin: 1.9em 0;
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--ptc-terracotta);
	font-family: var(--ptc-font-display);
	font-style: italic;
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--ptc-brown);
}

.ptc-post__content blockquote p:last-child { margin-bottom: 0; }

.ptc-post__content blockquote cite {
	display: block;
	margin-top: .7em;
	font-family: var(--ptc-font-body);
	font-style: normal;
	font-size: .72em;
	font-weight: 600;
	color: var(--ptc-ink-soft);
}

/* Imagens ---------------------------------------------------------------- */

/* Centrada por padrão: o editor insere a imagem sem alinhamento na maioria
   das vezes, e encostada à esquerda numa coluna de 760px ela fica torta. */
.ptc-post__content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.9em auto;
	border-radius: var(--ptc-radius-sm);
}

.ptc-post__content figure { margin: 1.9em 0; }

.ptc-post__content figure img { margin: 0 auto; }

.ptc-post__content figcaption,
.ptc-post__content .wp-caption-text {
	margin: .7em 0 0;
	text-align: center;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--ptc-ink-soft);
}

/* Alinhamentos do editor. alignwide/alignfull escapam da coluna de 760px
   pelo par margin-left: 50% + translateX(-50%), que não depende de saber a
   largura do container. */
.ptc-post__content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.ptc-post__content .alignleft {
	float: left;
	max-width: 50%;
	margin: .4em 1.6em 1.2em 0;
}

.ptc-post__content .alignright {
	float: right;
	max-width: 50%;
	margin: .4em 0 1.2em 1.6em;
}

.ptc-post__content .alignwide {
	width: min(100vw - 48px, 980px);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.ptc-post__content .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
	border-radius: 0;
}

.ptc-post__content .alignfull img { border-radius: 0; }

/* Vídeos e incorporações -------------------------------------------------- */

.ptc-post__content iframe,
.ptc-post__content video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: 1.9em 0;
	border: 0;
	border-radius: var(--ptc-radius-sm);
	background: #000;
}

.ptc-post__content .wp-block-embed { margin: 1.9em 0; }
.ptc-post__content .wp-block-embed iframe { margin: 0; }

/* Tabelas ---------------------------------------------------------------- */

/* O wrapper rola no horizontal: numa coluna de 760px uma tabela de quatro
   colunas não cabe no celular, e sem isso empurraria a página inteira. */
.ptc-post__content .wp-block-table { overflow-x: auto; margin: 1.9em 0; }

.ptc-post__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.9em 0;
	font-size: .95em;
}

.ptc-post__content .wp-block-table table { margin: 0; }

.ptc-post__content th {
	background: var(--ptc-terracotta);
	color: var(--ptc-white);
	font-weight: 600;
	text-align: left;
}

.ptc-post__content th,
.ptc-post__content td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--ptc-cream-2);
	vertical-align: top;
}

.ptc-post__content tbody tr:nth-child(even) { background: var(--ptc-cream); }

/* Separador, código e botão ---------------------------------------------- */

.ptc-post__content hr {
	border: 0;
	height: 1px;
	background: var(--ptc-cream-2);
	margin: 2.4em 0;
}

.ptc-post__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	background: var(--ptc-cream-2);
	padding: .15em .4em;
	border-radius: 6px;
}

.ptc-post__content pre {
	margin: 1.9em 0;
	padding: 18px 20px;
	background: var(--ptc-brown-dark);
	color: var(--ptc-white);
	border-radius: var(--ptc-radius-sm);
	overflow-x: auto;
	font-size: .88em;
	line-height: 1.6;
}

.ptc-post__content pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.ptc-post__content .wp-block-button__link {
	display: inline-block;
	padding: 12px 26px;
	background: var(--ptc-terracotta);
	color: var(--ptc-white);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.ptc-post__content .wp-block-button__link:hover {
	background: var(--ptc-terracotta-dark);
	color: var(--ptc-white);
}

@media (max-width: 640px) {
	.ptc-blog { padding: 48px 0 70px; }
	.ptc-post__inner { padding-top: 36px; padding-bottom: 60px; }
	.ptc-post:not(:has(.ptc-post__hero)) .ptc-post__inner { padding-top: 36px; }
}