/*
  Gami Development — home (round 4). Loaded after gami.css, site.css, modules/sheets.css and modules/o-que-fazemos.css.
  One scroll: Abertura → Hero → Números → Marcas → Trabalho → Como operamos → O que fazemos → Contato.
  Section rhythm: every top-level section uses .h-sec (padding-block clamp(96px, 11vw, 160px)); heads use .s-head.
*/

/* Fallback metrics so the swap to the web fonts doesn't move the layout (measured in round 1 against Arial/Menlo). */
@font-face { font-family: "Geologica Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 104%; ascent-override: 92%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Geologica Text Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 106.5%; ascent-override: 92%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Martian Fallback"; src: local("Menlo"), local("Menlo-Regular"), local("Consolas"); size-adjust: 108%; ascent-override: 92.6%; descent-override: 18.5%; line-gap-override: 0%; }
@font-face { font-family: "SG150 Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 158.7%; }
@font-face { font-family: "SG130 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 144.6%; }

@property --vp { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --f-display: "Geologica", "Geologica Text Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-label: "Science Gothic", "SG150 Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Martian Mono", "Martian Fallback", ui-monospace, Menlo, monospace;
  --t-hero: clamp(2.6rem, 0.8rem + 4.25vw, 4.625rem);
  --text-lit: #C9C4BB;            /* small text that crosses the room light */
  --paper-hi: #FBF8F1;
  --err: #A12000;
  --sec-pad: clamp(96px, 11vw, 160px);
}
.g-h1, .g-h2, .g-stat, .g-display { font-family: "Geologica", "Geologica Display Fallback", ui-sans-serif, system-ui, sans-serif; }

html { background: var(--ink); scroll-padding-top: calc(var(--header-h) + 16px); }
/* Lenis (desktop, fine pointer) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { min-height: 100svh; overflow-x: clip; background: transparent; }
[hidden] { display: none !important; }
main section[tabindex="-1"]:focus { outline: none; }

/* The shared header: the logo keeps its size at every width (1024–1279 the centred nav squeezed it) */
.s-header__logo img { max-width: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-header { grid-template-columns: auto 1fr auto; }
  .s-header__nav { gap: 22px; }
  .s-header__nav a { letter-spacing: .2em; }
}
.s-footer { position: relative; background: var(--ink); }

/* ---------------------------------------------------------------- light */
.light-css { position: fixed; inset: 0; z-index: -2; pointer-events: none; transition: opacity 600ms linear; }
#light { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; pointer-events: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 35; pointer-events: none; }
.gl-top #gl { z-index: 80; }
.is-opening .light-css { opacity: 0; }
.wash-css {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 800ms linear;
  background:
    radial-gradient(ellipse 80% 70% at 18% 100%, rgba(255,163,168,.62), rgba(255,138,122,.34) 42%, rgba(224,69,126,.14) 66%, transparent 84%),
    radial-gradient(ellipse 60% 55% at 86% 78%, rgba(255,111,150,.26), transparent 74%);
}
html.no-webgl.is-wash .wash-css { opacity: 1; }
html.is-wash .s-header { background: linear-gradient(to bottom, rgba(11,13,16,.97), rgba(11,13,16,.92)); }

/* ---------------------------------------------------------------- VINCO: 45° crease wipe */
.v {
  -webkit-mask-image: linear-gradient(135deg, #000 50%, transparent 50%); mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
  -webkit-mask-size: 200% 200%; mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--vp) * 100%) calc(var(--vp) * 100%); mask-position: calc(var(--vp) * 100%) calc(var(--vp) * 100%);
}
.is-opening .v { --vp: 1; }
.v.go { --vp: 0; transition: --vp var(--vdur, 600ms) var(--ease-fold) var(--vd, 0ms); }
.v.now { transition: none !important; }
.is-opening .v { animation: v-failsafe 1ms linear 4.5s forwards; }
@keyframes v-failsafe { to { --vp: 0; } }
html[data-motion="reduce"] .v { -webkit-mask: none; mask: none; }
/* the chrome waits for the mark to land (the verbatim header has no .v in its markup: JS adds it) */
.is-opening .s-header { background: transparent; border-bottom-color: transparent; }
.is-opening .s-header__logo img { opacity: 0; }
.is-opening .s-header__nav:not(.v), .is-opening .s-header__end:not(.v) { visibility: hidden; }
/* an alternative opening (hero/<id>.css) replaces #inicio and #numeros: keep the current markup out of sight until it mounts */
html[data-hero-pick]:not([data-hero-pick="atual"]):not(.hero-mounted) :is(#inicio, #numeros) > * { visibility: hidden; }
.skip-opening { position: fixed; right: 24px; bottom: 76px; z-index: 85; display: none; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font: 500 .6875rem/1 var(--f-label); font-stretch: 150%; letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); }
.skip-opening span { border-bottom: 1px solid var(--edge-2); padding-bottom: 4px; }
.skip-opening:hover { color: var(--text); }
.is-opening .skip-opening { display: inline-flex; align-items: center; }

/* Focus on chamfered buttons: clip-path would cut an outline, so the ring is drawn inside the shape */
.g-btn:focus-visible { outline: none; }
.g-btn:focus-visible::before { background: var(--focus); }
.g-btn:focus-visible::after { inset: 2px; }
.g-btn--primary:focus-visible::after { clip-path: polygon(0 0, calc(100% - var(--ch) - 2px) 0, 100% calc(var(--ch) + 2px), 100% 100%, 0 100%); }

/* ---------------------------------------------------------------- shared section rhythm */
.h-sec { position: relative; padding-block: var(--sec-pad); }
.h-link { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; color: var(--text); border-bottom: 1px solid var(--edge-2); font-family: var(--f-label); font-stretch: 130%; font-weight: 600; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; transition: border-color var(--d-ui) var(--ease-out); }
.h-link .g-arrow { font-family: var(--f-display); letter-spacing: 0; font-size: 1.15em; transition: transform var(--d-ui) var(--ease-out); }
.h-link:hover { border-color: var(--text); }
.h-link:hover .g-arrow { transform: translateX(3px); }
.s-head__aside .h-link { margin-top: 18px; }
.foco { transition: font-variation-settings 600ms var(--ease-out); }
.js-anim .foco:not(.is-sharp) { font-variation-settings: "SHRP" 0; }

/* =====================================================================
   1 · HERO
   ===================================================================== */
.hero { position: relative; min-height: calc(100svh - var(--header-h)); margin-bottom: var(--pin-extra, 0px); display: grid; align-items: center; padding-block: clamp(24px, 4svh, 48px); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: min(62vw, 900px); pointer-events: none; background: radial-gradient(ellipse 70% 58% at 34% 48%, rgba(11,13,16,.62), rgba(11,13,16,.3) 55%, transparent 80%); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.hero__copy { grid-column: 1 / span 5; position: relative; z-index: 1; }
.hero__copy.is-gone { pointer-events: none; }
.hero .eyebrow { line-height: 1.85; letter-spacing: .24em; font-stretch: 130%; }
.hero .eyebrow__l { display: block; }
.hero .eyebrow .g-pending { margin-left: 10px; font-size: .6rem; letter-spacing: 0; text-transform: none; line-height: 1.5; vertical-align: .15em; }
.hero h1 { margin-top: 30px; font-size: var(--t-hero); line-height: .95; letter-spacing: -.04em; max-width: 8.54em; }
.hero h1 .h1-line { padding-bottom: .14em; margin-bottom: -.14em; }
.hero .g-lede { margin-top: 26px; max-width: 29.9em; }
.ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.ctas .g-btn--primary::before { background: var(--paper-2); }
/* 1024–1439: the two CTAs stay on one row */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ctas { flex-wrap: nowrap; }
  .ctas .g-btn { padding-inline: 20px; letter-spacing: .14em; white-space: nowrap; }
}
.lede-touch { display: none; }
@media (hover: none) { .lede-hover { display: none; } .lede-touch { display: inline; } }   /* one --signal per viewport: the header CTA owns it */

.desk { grid-column: 6 / span 7; position: relative; z-index: 3; min-width: 0; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; }
/* round 3, noise down: no corner ticks, no caption restating the reel */
.stage__marks, .desk__cap { display: none !important; }
.stage__marks {
  position: absolute; inset: -12px; pointer-events: none; --m: 12px; --c: rgba(250, 239, 239, .18);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--m) no-repeat;
}
.fw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.glow { position: absolute; inset: 0; box-shadow: 0 0 60px 6px rgb(var(--spill) / .35), 0 0 160px 24px rgb(var(--spill) / .05); pointer-events: none; transition: opacity 600ms linear; }
.glow-off .glow { opacity: 0; }
.frame { position: absolute; inset: 0; padding: 8px; --ch: 24px; }
.frame::after { opacity: calc(1 - var(--e, 0)); }   /* the bezel highlight goes with the bezel as the screen fills the frame */
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #07080A; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #07080A; }
.sheet-open {
  position: absolute; inset: 0; z-index: 3; background-color: var(--paper);
  background-image: linear-gradient(35deg, rgba(255, 163, 168, .10), transparent 45%), linear-gradient(215deg, rgba(26, 23, 20, .05), transparent 60%);
}
.sheet-open__label { position: absolute; left: 20px; bottom: 16px; margin: 0; font: 400 12px/1 var(--f-mono); font-stretch: 87.5%; color: var(--paper-ink-2); }
.sheet-band { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(225deg, var(--paper) 0%, var(--paper-2) 100%); display: none; filter: drop-shadow(-4px 4px 6px rgba(0, 0, 0, .35)); }
/* closing fold (DOBRA): the back of the sheet, reflected across the 45° crease */
.fold-flap { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: none; filter: drop-shadow(-12px -10px 18px rgba(0,0,0,.45)); }
.fold-flap i { position: absolute; inset: 0; background: linear-gradient(315deg, #C9BCA2 0%, #DCD1BA 18%, #EAE2D0 52%, #F5EFE2 100%); }
.fold-flap.on { display: block; }
.rm-play { position: absolute; left: 16px; bottom: 16px; z-index: 5; display: none; }
.rm-play .tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.rm-play .sq { width: 10px; height: 10px; background: currentColor; }
.stage.is-rm .rm-play { display: inline-flex; }
.desk__cap { margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; font-size: .75rem; color: var(--text-2); }
.desk__cap::before { content: ""; width: 24px; height: 1px; background: var(--text-3); flex: none; transform: translateY(-.3em); }
.band-slot { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.band-slot:empty { display: none; }

/* =====================================================================
   2 · NÚMEROS
   ===================================================================== */
.numeros { position: relative; padding-block: clamp(72px, 9vw, 120px); }
/* pinned (desktop): the band lives in the frame; the empty section stays as an invisible #numeros anchor (top set by hero.js) */
.numeros.is-empty { position: absolute; left: 0; width: 1px; height: 1px; padding: 0; visibility: hidden; pointer-events: none; }
.band { position: relative; }
.band__scrim { display: none; }
.band__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(28px, 4vh, 44px); align-items: end; }
.band__head { grid-column: 1 / span 7; }
.band__head .g-eyebrow { display: flex; align-items: center; gap: 12px; }
.band__head .g-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--text-3); }
.band__head .g-h2 { margin-top: 18px; max-width: 12ch; }
.band__side { grid-column: 9 / span 4; display: grid; justify-items: start; gap: 6px; }
.band__side .g-lede { font-size: 1.0625rem; }
.stats { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; }
.stat { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--edge-2); }
.stat .stat__n { order: 1; margin: 0; font-family: "Geologica", "Geologica Display Fallback", sans-serif; font-size: clamp(2.6rem, .6rem + 4.3vw, 5.25rem); line-height: .9; letter-spacing: -.035em; font-weight: 620; color: var(--text); font-variation-settings: "SHRP" 100; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat dt { order: 2; font: 400 .75rem/1.4 var(--f-mono); font-stretch: 87.5%; color: var(--text-2); }
.band__note .g-pending { white-space: normal; font-size: .75rem; line-height: 1.5; padding: 2px 6px; }
.band__note { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .6875rem; color: var(--text-2); }
.led { clip-path: inset(0 0 100% 0); }
.lit .led { clip-path: inset(0 0 -4px 0); transition: clip-path 320ms steps(8) var(--ld, 0ms); }
.h2-foco { font-variation-settings: "SHRP" 0; }
.lit .h2-foco { font-variation-settings: "SHRP" 100; transition: font-variation-settings 600ms var(--ease-out) 120ms; }
html[data-motion="reduce"] .led { clip-path: none; }
html[data-motion="reduce"] .h2-foco { font-variation-settings: "SHRP" 100; }

/* pinned: the band lives inside the full-bleed program screen */
.band-slot .band { position: absolute; left: 0; top: 0; transform: translate(var(--bx, 0px), var(--by, 0px)); width: var(--bw, 100%); height: var(--bh, 100%); pointer-events: none; }
.band-slot .band.lit { pointer-events: auto; }
.band-slot .band__scrim { display: block; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,13,16,.08) 0%, rgba(11,13,16,.55) 28%, rgba(11,13,16,.88) 50%, rgba(11,13,16,.95) 100%); opacity: 0; transition: opacity 300ms linear; }
.band-slot .band.lit .band__scrim { opacity: 1; }
.band-slot .band__inner { position: absolute; inset: auto 0 0 0; padding: 0 var(--margin) clamp(28px, 5vh, 56px); max-width: var(--maxw); margin: 0 auto; }
.band-slot .band__head .g-h2 { font-size: clamp(2rem, .6rem + 2.9vw, 3.6rem); }
.band-slot .stat .stat__n { font-size: clamp(2.4rem, .5rem + 3.9vw, 4.9rem); }

/* =====================================================================
   3 · MARCAS — one band of white logos, no chips
   ===================================================================== */
.logos { --fade: clamp(48px, 12vw, 200px); --gap: clamp(56px, 6.4vw, 104px); --u: 1.02px;
  position: relative; overflow: hidden; contain: paint; padding-block: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
.logos__track { display: flex; width: max-content; animation: logos-drift var(--dur, 60s) linear infinite; will-change: transform; }
@keyframes logos-drift { to { transform: translate3d(-50%, 0, 0); } }
.logos:has(:focus-visible) .logos__track, .logos.is-off .logos__track { animation-play-state: paused; }
.logos__set { display: flex; align-items: center; gap: var(--gap); padding: 0 var(--gap) 0 0; margin: 0; list-style: none; }
.logos__item { flex: none; }
.logos__a { display: flex; align-items: center; justify-content: center; height: 96px; padding: 0 4px; opacity: .78; transition: opacity var(--d-ui) var(--ease-out); }
.logos__a img { display: block; height: calc(var(--lh) * var(--u)); width: auto; max-width: none; }
.logos__word { font-family: var(--f-display); font-weight: 620; font-size: 1.1rem; letter-spacing: -.02em; color: var(--text); white-space: nowrap; font-variation-settings: "SHRP" 100; }
/* hover = highlight, never a fold: the logo comes up to full white with a soft coral glow and a short coral rule under it */
.logos__a { position: relative; }
.logos__a img, .logos__word { transition: filter var(--d-ui) var(--ease-out); }
.logos__a::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 28px; height: 2px; margin-left: -14px; background: #FF6A5E;
  transform: scaleX(0); transition: transform 320ms var(--ease-out); }
@media (hover: hover) {
  .logos__set:hover .logos__a { opacity: .45; }
  .logos__set .logos__a:hover { opacity: 1; }
  .logos__a:hover img, .logos__a:hover .logos__word { filter: brightness(1.25) drop-shadow(0 0 14px rgba(255,106,94,.45)); }
  .logos__a:hover::after { transform: scaleX(1); }
}
.logos__a:focus-visible { opacity: 1; outline: 2px solid var(--focus); outline-offset: 2px; }
.logos__a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 767px) { .logos__a::after { bottom: 8px; } }
/* Marcas → Trabalho read as one flow: the band hands straight over to the work */
.marcas { padding-bottom: clamp(32px, 3.5vw, 56px); }
.trabalho { padding-top: clamp(56px, 5.5vw, 88px); }
@media (max-width: 767px) { .logos { --gap: 44px; --u: .8px; } .logos__a { height: 72px; } }
/* reduced motion: a centred, symmetric grid */
html[data-motion="reduce"] .logos { -webkit-mask-image: none; mask-image: none; }
html[data-motion="reduce"] .logos__track { animation: none; width: auto; }
html[data-motion="reduce"] .logos__set[aria-hidden="true"] { display: none; }
html[data-motion="reduce"] .logos__set { flex: 1; flex-wrap: wrap; justify-content: center; column-gap: var(--gap); row-gap: 8px; padding: 0 var(--margin); max-width: 1180px; margin: 0 auto; }

/* =====================================================================
   4 · TRABALHO
   ===================================================================== */
/* A glimpse, then the door: one row of three quiet tiles (footage + two still designed screens) and "Ver exemplos" */
.tz { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter);
  height: clamp(240px, 24vw, 360px); }
.tz__tile { --ch: 18px; position: relative; min-width: 0; }
.tz__a { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--ink-2);
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%); }
.tz__a::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 1px var(--edge);
  background: linear-gradient(225deg, transparent calc(var(--ch) * .7071 - .5px), var(--edge-2) calc(var(--ch) * .7071), transparent calc(var(--ch) * .7071 + .8px)); }
.tz__tile:has(.tz__a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.tz__a:focus-visible { outline: none; }
.tz__tile--film .tz__a { background: #07080A; }
.tz__poster, .tz__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out); }
.tz__video { opacity: 0; transition: opacity 300ms linear, transform 700ms var(--ease-out); }
.tz__tile--film.is-playing .tz__video { opacity: 1; }
.tz__tile--scr .tz__a { background: radial-gradient(ellipse 80% 60% at 50% 42%, color-mix(in srgb, var(--crimson) 16%, transparent), transparent 74%), var(--ink-2); }
.tz__scr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); aspect-ratio: var(--sr); border-radius: 5px; overflow: hidden;
  box-shadow: 0 0 0 4px var(--bezel), 0 0 0 5px var(--edge-2), 0 24px 50px -22px rgba(0,0,0,.8); transition: transform 700ms var(--ease-out); }
.tz__scr > .sa { position: absolute; inset: 0; }
.tz__scr.is-tall { height: 78%; }
.tz__scr.is-wide { width: 80%; }
/* hover / keyboard focus: the film greys down a little and a small caption rises from the bottom (it's a link) */
.tz__poster, .tz__video { transition: transform 700ms var(--ease-out), filter 420ms var(--ease-out), opacity 300ms linear; }
.tz__a::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 420ms var(--ease-out);
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 82%, transparent) 0%, color-mix(in srgb, var(--ink) 30%, transparent) 45%, transparent 70%); }
.tz__info { position: absolute; z-index: 4; left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.6vw, 22px);
  display: grid; justify-items: start; gap: 4px; pointer-events: none; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); }
.tz__k { font-family: var(--f-mono); font-stretch: 87.5%; font-size: .6875rem; letter-spacing: .06em; color: color-mix(in srgb, var(--text) 78%, var(--text-2)); }
.tz__t { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.02rem, .8rem + .55vw, 1.4rem); line-height: 1.15; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.tz__go { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text); border-bottom: 1px solid var(--signal); padding-bottom: 2px; }
.tz__go .g-arrow { transition: transform 360ms var(--ease-out); }
@media (hover: hover) {
  .tz__a:hover .tz__poster, .tz__a:hover .tz__video { transform: scale(1.03); filter: grayscale(.5) brightness(.62); }
  .tz__a:hover::before { opacity: 1; }
  .tz__a:hover .tz__info { opacity: 1; transform: none; }
  .tz__a:hover .tz__go .g-arrow { transform: translateX(3px); }
  .tz__a:hover .tz__scr { transform: translate(-50%, -50%) scale(1.04); }
}
.tz__a:focus-visible .tz__poster, .tz__a:focus-visible .tz__video { filter: grayscale(.5) brightness(.62); }
.tz__a:focus-visible::before { opacity: 1; }
.tz__a:focus-visible .tz__info { opacity: 1; transform: none; }
/* touch screens have no hover: the caption is simply there, over a light fade, so it's clear the tiles open */
@media (hover: none) {
  .tz__a::before { opacity: .9; }
  .tz__info { opacity: 1; transform: none; }
}
html[data-motion="reduce"] .tz__info, html[data-motion="reduce"] .tz__poster, html[data-motion="reduce"] .tz__video { transition: none; }
.tz__more { margin-top: clamp(36px, 4vw, 56px); display: flex; justify-content: flex-start; }
@media (max-width: 1023px) { .tz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  .tz__tile--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .tz__tile--tall { aspect-ratio: 4 / 5; } }
@media (max-width: 767px) { .tz { gap: 12px; } .tz__tile--tall { aspect-ratio: 3 / 4; } .tz__tile { --ch: 14px; } .tz__more .g-btn { width: 100%; justify-content: center; } }

/* =====================================================================
   5 · COMO OPERAMOS
   ===================================================================== */
.op { overflow-x: clip; }
.op__rail { position: relative; }
.op__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: var(--gutter); }
.op__step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.op__mark { position: relative; display: flex; align-items: center; gap: 14px; height: 20px; }
/* the crease: a segment runs from each step's number to the next dot (through the gutter); it lights as the step passes */
.op__seg { position: relative; flex: 1; align-self: center; height: 1px; margin-right: calc(-1 * var(--gutter) + 10px); background: rgba(250,239,239,.16); }
.op__step:last-child .op__seg { margin-right: calc(-1 * var(--margin)); }
.op__step:first-child .op__mark::before { content: ""; position: absolute; top: 50%; height: 1px; left: calc(-1 * var(--margin)); width: calc(var(--margin) - 10px); background: rgba(250,239,239,.16); }
.op__seg b { position: absolute; inset: 0; background: linear-gradient(90deg, #FFA3A8, #FF8A7A 45%, #E0457E 75%, #FF6F96); transform-origin: 0 50%; transform: scaleX(0); transition: transform 600ms var(--ease-fold); }
.op__step.is-past .op__seg b, .op__step.is-current:last-child .op__seg b { transform: scaleX(1); }
.op__dot { flex: none; width: 9px; height: 9px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--text-3); }
.op__step.is-past .op__dot { background: var(--text-2); box-shadow: none; }
.op__step.is-current .op__dot { background: var(--signal); box-shadow: none; }
.op__num { padding: 0 8px 0 0; background: transparent; font-family: var(--f-mono); font-stretch: 87.5%; font-size: .78rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.op__step.is-current .op__num { color: var(--text); }
.op__h { margin: 22px 0 0; font-weight: 620; font-size: clamp(1.6rem, 1.1rem + .9vw, 2.15rem); line-height: 1.08; letter-spacing: -.022em; color: var(--text); font-variation-settings: "SHRP" 100; }
.js-anim .op__step:not(.is-lit) .op__h { color: var(--text-2); font-variation-settings: "SHRP" 0; }
.op__h { transition: color 400ms linear, font-variation-settings 600ms var(--ease-out); }
.op__dot { transition: background-color 300ms linear, box-shadow 300ms linear; }
.op__num { transition: color 300ms linear; }
.op__p { margin: 14px 0 0; max-width: 31ch; text-wrap: pretty; }
/* one line icon per step, drawn in the site's 45° chamfer language; it draws on once as the step lights (no loop) */
.op__ic { display: block; width: 48px; height: 48px; margin: 30px 0 0 -3px; fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
  transition: stroke 400ms linear; }
.op__ic path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.op__ic .op__ic-ac { stroke: var(--signal); }
.op__step.is-lit .op__ic { stroke: var(--text); }
.js-anim .op__step:not(.is-lit) .op__ic path { stroke-dashoffset: 1; }
.js-anim .op__ic path { transition: stroke-dashoffset 900ms var(--ease-out); }
.js-anim .op__ic .op__ic-ac { transition-delay: 450ms; }
html[data-motion="reduce"] .op__ic path { stroke-dashoffset: 0 !important; transition: none !important; }
.op__h { margin-top: 22px; }

/* =====================================================================
   6 · O QUE FAZEMOS — the module brings its own CSS; only the section rhythm is shared
   ===================================================================== */

/* =====================================================================
   8 · CONTATO — the cream sheet (ported from round-1 06, "A próxima folha")
   ===================================================================== */
.folha-sec { content-visibility: auto; contain-intrinsic-size: auto 1100px; position: relative; padding-block: var(--sec-pad) calc(var(--sec-pad) + 24px); overflow-x: clip; --sheet-rot: -2deg; }
/* every "Falar com o time" lands on the sheet itself (not on the section's top padding), so the whole form, Enviar
   included, is in view on arrival */
#contato { scroll-margin-top: calc(32px - var(--sec-pad)); }
.folha-sec::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain-url); background-size: 256px 256px; mix-blend-mode: overlay; opacity: .16; }
.folha-sec > .g-wrap { position: relative; z-index: 1; }
.folha-wrap { position: relative; max-width: 1188px; margin: 0 auto; }
.folha-tri { position: absolute; z-index: 0; left: -64px; bottom: -58px; width: clamp(180px, 20vw, 290px); aspect-ratio: 2 / 1; background: var(--signal); clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: 50% 100%; }
html.js-anim .folha.is-armed ~ .folha-tri, html.js-anim .folha-tri.is-hidden { transform: translate(34%, -46%); }
.folha-tri.is-out { transition: transform 460ms var(--ease-out); transform: none; }
.folha { position: relative; z-index: 1; transform: rotate(var(--sheet-rot)); }
.folha__shadow { position: absolute; inset: 0; box-shadow: 0 50px 90px -30px rgba(0,0,0,.75), 0 18px 30px -18px rgba(0,0,0,.5); }
.folha__paper { --ch: 38px; --paper-ink: #14110E; position: relative; isolation: isolate; background: var(--paper); color: var(--paper-ink);
  padding: clamp(40px, 6vw, 88px) clamp(28px, 6.4vw, 92px) clamp(44px, 5.5vw, 80px);
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%); }
.folha__paper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--paper-grain, none); background-size: 180px 180px; mix-blend-mode: multiply; opacity: .07; }
.folha__paper::after { content: ""; position: absolute; top: 0; right: 0; width: var(--ch); height: var(--ch); background: linear-gradient(225deg, transparent 50%, #CFC4AE 50%, var(--paper-2) 62%, #EDE6D5 100%); filter: drop-shadow(-3px 4px 4px rgba(26,23,20,.18)); }
.folha__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5.5vw, 88px); align-items: start; }
.folha__cover, .folha__flapwrap, .folha__shade { position: absolute; inset: 0; pointer-events: none; display: none; }
.folha.is-armed .folha__cover, .folha.is-armed .folha__flapwrap, .folha.is-armed .folha__shade { display: block; }
.folha__cover { background: #0C0E11; box-shadow: inset 0 0 0 1px rgba(250,239,239,.07); }
.folha__shade { background: linear-gradient(135deg, transparent 0, transparent calc(var(--c, 0px) * .7071 - 90px), rgba(60,20,28,.26) calc(var(--c, 0px) * .7071)); }
.folha__flapwrap { overflow: hidden; perspective: 1800px; filter: drop-shadow(-10px 14px 16px rgba(0,0,0,.34)); }
.folha__flap { position: absolute; inset: 0; background: #0C0E11; backface-visibility: visible; will-change: transform, clip-path; }
.folha .tag { position: absolute; left: 26px; top: 24px; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--f-label); font-stretch: 150%; font-weight: 500; font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); }
.folha .tag i { width: 9px; height: 9px; box-shadow: inset 0 0 0 2px var(--gold); }
.folha__flap.is-back .tag { display: none; }
.folha__cover .tag { left: calc(var(--c0, 0px) - 12px); }
.folha.tag-cover .folha__flap .tag, .folha:not(.tag-cover) .folha__cover .tag { display: none; }
.folha.is-folding .folha__cover .tag { visibility: hidden; }
.folha .g-eyebrow { color: var(--paper-ink); display: flex; align-items: center; gap: 12px; font-size: .74rem; }
.tally { flex: none; width: 11px; height: 11px; box-shadow: inset 0 0 0 2px var(--signal); background: transparent; }
.tally.is-on { box-shadow: none; background: var(--signal); width: 9px; height: 9px; margin: 1px; }
.folha h2 { margin-top: 26px; color: var(--paper-ink); max-width: 7.5em; }
.folha__lede { margin: 26px 0 0; font-size: 1.1875rem; line-height: 1.5; color: var(--paper-ink); max-width: 27.2em; text-wrap: pretty; }
.folha__channels { margin-top: 36px; display: grid; gap: 10px; max-width: 320px; }
.folha__channels .tip-wrap, .folha__channels .pbtn { width: 100%; }
.folha__channels .pbtn { justify-content: flex-start; }
.folha__channels[hidden], .folha__channels [hidden] { display: none; }
.folha__channels a.pbtn { text-decoration: none; }
/* honeypot: off-screen for people, still in the form for bots */
.form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.pbtn[disabled] { cursor: progress; opacity: .72; }
.pbtn[disabled]:active { transform: none; }
.folha__note { margin: 26px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--paper-ink); max-width: 29.9em; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.linkbtn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.pbtn { --ch: var(--ch-btn); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 22px; border: 0; cursor: pointer;
  font-family: "Science Gothic", "SG130 Fallback", ui-sans-serif, system-ui, sans-serif; font-stretch: 130%; font-weight: 600; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%); transition: transform 120ms var(--ease-out), background var(--d-ui) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.pbtn:active { transform: scale(.98); }
.pbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--signal); }
.pbtn--ink { background: var(--paper-ink); color: var(--paper); }
.pbtn--ink::after { content: ""; position: absolute; top: 0; right: 0; width: calc(var(--ch) + 5px); height: calc(var(--ch) + 5px); background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pbtn--ink:hover { background: #2A2520; }
.pbtn--ink .g-arrow { font-family: var(--f-display); letter-spacing: 0; font-size: 1.1em; transition: transform var(--d-ui) var(--ease-out); }
.pbtn--ink:hover .g-arrow { transform: translateX(3px); }
.pbtn--ink:focus-visible { box-shadow: inset 0 0 0 2px var(--signal), inset 0 0 0 4px var(--paper-ink), inset 0 0 0 5px rgba(250,239,239,.6); }
.pbtn--ghost { background: transparent; color: rgba(26,23,20,.86); box-shadow: inset 0 0 0 1px rgba(26,23,20,.32); }
.pbtn--ghost::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(225deg, transparent calc(var(--ch) * .7071 - .3px), rgba(26,23,20,.32) calc(var(--ch) * .7071 + .2px), rgba(26,23,20,.32) calc(var(--ch) * .7071 + .9px), transparent calc(var(--ch) * .7071 + 1.4px)); }
.pbtn--ghost[aria-disabled="true"] { cursor: not-allowed; }
.pbtn--ghost svg { width: 16px; height: 16px; flex: none; }
.pbtn[aria-busy="true"] { pointer-events: none; }
.tip-wrap { position: relative; display: inline-flex; }
.tip { position: absolute; left: calc(100% + 10px); top: 50%; z-index: 5; white-space: nowrap; background: var(--paper-ink); color: var(--paper); padding: 7px 10px;
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: .72rem; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  opacity: 0; transform: translate(-3px, -50%); pointer-events: none; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.tip-wrap:hover .tip, .tip-wrap:focus-within .tip, .tip-wrap.is-tip .tip { opacity: 1; transform: translate(0, -50%); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9375rem; font-weight: 520; color: var(--paper-ink); line-height: 1.3; }
.field label .req { font-weight: 380; font-size: .8125rem; margin-left: .4em; }
.inp { --ch: var(--ch-btn); --line: rgba(26,23,20,.34); --lw: 1px; --well: var(--paper-hi);
  width: 100%; min-height: 52px; padding: 13px 15px; font-size: 1rem; line-height: 1.4; color: var(--paper-ink); border: 0; box-shadow: inset 0 0 0 var(--lw) var(--line);
  background: linear-gradient(225deg, transparent calc(var(--ch) * .7071 - .3px), var(--line) calc(var(--ch) * .7071 + .2px), var(--line) calc(var(--ch) * .7071 + var(--lw) - .1px), transparent calc(var(--ch) * .7071 + var(--lw) + .4px)) no-repeat, var(--well);
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
  transition: box-shadow var(--d-ui) var(--ease-out), background-color var(--d-ui) var(--ease-out); border-radius: 0; -webkit-appearance: none; appearance: none; }
textarea.inp { min-height: 128px; resize: vertical; }
.inp::placeholder { color: #5E564B; opacity: 1; }
.inp:hover { --line: rgba(26,23,20,.55); }
.inp:focus, .inp:focus-visible { outline: none; --line: var(--paper-ink); --lw: 2px; --well: #FFFCF6; }
.field:focus-within .inp:focus { box-shadow: inset 0 0 0 var(--lw) var(--line), inset 0 -3px 0 0 var(--signal); }
.inp[aria-invalid="true"] { --line: var(--err); --lw: 2px; }
.hint { font-size: .8125rem; line-height: 1.45; color: var(--paper-ink); margin: 0; }
.err { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: .875rem; font-weight: 520; line-height: 1.4; color: var(--paper-ink); }
.err:empty { display: none; }
.err::before { content: ""; flex: none; width: 10px; height: 5px; background: var(--err); clip-path: polygon(0 100%, 50% 0, 100% 100%); transform: translateY(-1px); }
.check { display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: .9375rem; line-height: 1.45; color: var(--paper-ink); }
.check input { flex: none; width: 24px; height: 24px; margin: -1px 0 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: var(--paper-hi); box-shadow: inset 0 0 0 1.5px rgba(26,23,20,.6); border-radius: 0; display: grid; place-items: center; }
.check input::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--paper); border-bottom: 2.5px solid var(--paper); transform: translateY(-2px) rotate(-45deg) scale(0); }
.check input:checked { background: var(--paper-ink); box-shadow: none; }
.check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.check input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--err); }
.checks { grid-column: 1 / -1; display: grid; gap: 2px; margin-top: 4px; }
.submit-row { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 8px; padding-top: 22px; border-top: 1px solid rgba(26,23,20,.14); }
.submit-row .pbtn--ink { min-width: 188px; }
.form-status { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; margin: 4px 0 -6px; font-size: .9375rem; font-weight: 560; line-height: 1.45; color: var(--paper-ink); }
.form-status::before { content: ""; flex: none; width: 12px; height: 6px; background: var(--err); clip-path: polygon(0 100%, 50% 0, 100% 100%); transform: translateY(-1px); }
.form-status:empty { display: none; }
.ok { outline: none; padding-top: 6px; }
.ok__title { margin: 0; font-family: "Geologica", "Geologica Display Fallback", sans-serif; font-weight: 620; font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.3rem); line-height: 1; letter-spacing: -.035em; font-variation-settings: "SHRP" 100; color: var(--paper-ink); }
.ok__pending { margin: 16px 0 0; }
.ok__sum { margin: 26px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--paper-ink); max-width: 29.9em; }
.ok__note { margin: 18px 0 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; line-height: 1.55; color: var(--paper-ink); }
.ok__again { margin-top: 28px; }
.priv-dlg { max-width: min(560px, calc(100vw - 32px)); width: 100%; padding: 0; border: 0; background: var(--ink-2); color: var(--text-2); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.priv-dlg::backdrop { background: rgba(0,0,0,.72); }
.priv-dlg__in { padding: 36px 32px 28px; box-shadow: inset 0 0 0 1px var(--edge); }
.priv-dlg h2 { margin: 12px 0 18px; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em; }
.priv-dlg dl { margin: 0; display: grid; gap: 16px; }
.priv-dlg dt { color: var(--text); font-weight: 520; }
.priv-dlg dd { margin: 4px 0 0; line-height: 1.55; }
.priv-dlg .close-row { margin-top: 28px; display: flex; justify-content: flex-end; }

/* =====================================================================
   Short desktop screens (13" laptops)
   ===================================================================== */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero h1 { margin-top: 14px; font-size: min(var(--t-hero), 9.4svh); }
  .hero .g-lede { margin-top: 20px; font-size: 1.125rem; }
  .ctas { margin-top: 22px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero .eyebrow { font-size: .625rem; letter-spacing: .16em; font-stretch: 125%; }
  .hero h1 { font-size: min(calc(5.262vw - 1.9px), 8.4svh); }
  .ctas { gap: 10px; }
  .ctas .g-btn { padding: 0 12px; letter-spacing: .1em; font-size: .625rem; }
  .op__h { font-size: 1.45rem; }
}

/* =====================================================================
   Tablet & phone
   ===================================================================== */
@media (max-width: 1023px) {
  .hero { min-height: 0; padding-block: 40px 24px; }
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero__copy { display: contents; }
  .hero .eyebrow { order: 1; } .hero h1 { order: 2; } .hero .g-lede { order: 3; }
  .desk { order: 4; margin-top: 36px; }
  .ctas { order: 5; }
  .stage__marks { display: none; }
  .hero::before { width: 100%; background: radial-gradient(ellipse 95% 40% at 40% 24%, rgba(11, 13, 16, .6), transparent 80%); }
  .numeros { padding-top: 56px; }
  .numeros::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom, rgba(11,13,16,0), rgba(11,13,16,.86) 60px, rgba(11,13,16,.86) calc(100% - 60px), rgba(11,13,16,0)); }
  .band__head, .band__side { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); row-gap: 0; }
  .op__step:nth-child(n+3) { margin-top: 64px; }
  .op__seg, .op__step:first-child .op__mark::before { display: none; }
  .folha__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) { .s-header .g-btn { min-height: 44px; } }   /* touch target (site.css sets 40 px) */
@media (max-width: 440px) {
  /* the shared header's CTA + menu don't fit next to the logo at 390 px: tighten the CTA (see report) */
  .s-header { gap: 8px; }
  .s-header .g-btn { padding: 0 11px; letter-spacing: .1em; font-size: .625rem; min-height: 44px; height: auto; }
  .s-header__end { gap: 2px; }
  .s-header__logo img { width: 96px; }
}
@media (max-width: 767px) {
  :root { --t-hero: clamp(2.3rem, 1.2rem + 4.2vw, 2.75rem); }
  .hero .eyebrow { font-size: .625rem; letter-spacing: .2em; font-stretch: 125%; line-height: 1.9; }
  .hero h1 { margin-top: 16px; }
  .hero .g-lede { margin-top: 18px; font-size: 1.0625rem; line-height: 1.5; }
  .desk { margin-top: 28px; }
  .ctas { margin-top: 28px; }
  .ctas .g-btn { flex: 1 1 auto; }
  .stats { column-gap: 16px; row-gap: 28px; }
  .stat .stat__n { font-size: clamp(2.3rem, 1rem + 6vw, 3rem); }
  .op__list { grid-template-columns: 1fr; grid-template-rows: none; }
  .op__step { grid-row: auto; grid-template-rows: none; padding-left: 32px; position: relative; }
  .op__step:nth-child(n+2) { margin-top: 56px; }
  .op__step::before { content: ""; position: absolute; left: 4px; top: 30px; bottom: -56px; width: 1px; background: var(--edge); }
  .op__step:last-child::before { display: none; }
  .op__mark { margin-left: -32px; gap: 23px; }
  .op__h { margin-top: 14px; }
  .op__ic { margin-top: 18px; width: 40px; height: 40px; }
  .folha-sec { --sheet-rot: 0deg; }
  .folha-wrap { margin: 0 calc(-1 * var(--margin) + 4px); }
  .folha__paper { --ch: 24px; padding: 36px 20px 40px; }
  .folha h2 { font-size: 2.35rem; }
  .folha__lede { font-size: 1.0625rem; }
  .folha__channels { margin-top: 24px; max-width: none; }
  .tip { left: 0; top: calc(100% + 6px); transform: translateY(-3px); }
  .tip-wrap:hover .tip, .tip-wrap:focus-within .tip, .tip-wrap.is-tip .tip { transform: none; }
  .folha-tri { left: -30px; bottom: -44px; width: 150px; }
  .form { grid-template-columns: 1fr; gap: 20px; }
  .submit-row .pbtn--ink { width: 100%; }
  .folha .g-eyebrow { font-size: .64rem; letter-spacing: .22em; gap: 10px; }
  .linkbtn { padding: 11px 10px; margin: -11px -10px; }
  .skip-opening { bottom: 72px; right: 16px; }
}

/* O que fazemos: the module keeps half a header of run-out under its last block (so the sticky stage stays whole);
   on the home that run-out comes out of the section's bottom padding, so the seam to the contact sheet is the standard one */
@media (min-width: 1024px) { #o-que-fazemos { padding-bottom: calc(var(--sec-pad) - var(--header-h) / 2); } }


/* O que fazemos "Já fizemos": the project links sit inline in running copy; on touch, open the lines up and
   pad each link vertically so every tap target is ~31 px tall on a ~31.5 px line pitch (no overlap) */
@media (pointer: coarse) {
  .oqf__done { line-height: 2.1; }
  .oqf__done a { padding-block: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}

/* Footer touch targets: 44 px minimum on touch screens (mirrors lib/site.css footer). */
@media (pointer: coarse) {
  .s-footer__nav, .s-footer__meta { gap: 0; }
  .s-footer__nav a, .s-footer__meta > a, .s-footer__meta > button,
  .s-footer__priv > a, .s-footer__priv > button { min-height: 44px; display: inline-flex; align-items: center; }
  .s-footer__priv { display: inline-flex; align-items: center; gap: 8px; }
}