/* Static image content, with transitions and scroll entrances on its container. */
.sp-campaign, .sp-products-shell { min-width: 0; }
.sp-campaign-panel img, .sp-products figure > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  border-radius: 3px;
}
body.portfolio-r6 #laboratorio { padding-block: 112px; }
body.portfolio-r6 #laboratorio .ads-heading { padding-top: 0; }
.sp-campaign { width: min(100%, 680px); margin: 36px auto 0; }
/* Channel tiles (pattern of the Fatos studio platform selector, lab f-e3): every
   channel visible at once, the official mark over a short name, a white
   highlight that slides to the chosen tile and the brand colour under it.
   4 columns on a phone, 6 from 600px. The caption names the channel in full. */
.sp-platforms-wrap { position: relative; margin-bottom: 22px; }
.sp-platforms {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
  border: 1px solid #d6dccf;
  border-radius: 20px;
  background: #e8ece1;
}
.sp-platforms [role='tab'] {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 66px;
  padding: 8px 2px 7px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #59664f;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, background-color 180ms ease;
}
.sp-tab-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-n-short { display: none; }
@media (max-width: 359px) { .sp-n-long { display: none; } .sp-n-short { display: inline; } }
.sp-platforms [role='tab'][aria-selected='true'] { color: #13291d; }
.sp-platforms [role='tab']:hover:not([aria-selected='true']) { color: #193827; background: #f1f4ec80; }
.sp-platforms .sp-platform-logo { display: block; flex: none; width: auto; height: 22px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.sp-platforms .sp-platform-logo--doc { width: 22px; fill: none; stroke: #2b4a37; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-platforms [role='tab']:active .sp-platform-logo { transform: scale(.92); }
.sp-platforms [role='tab'][aria-selected='true'] .sp-platform-logo { transform: scale(1.1); }
.sp-platforms [role='tab']::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--ch, #294c36); transform: scaleX(0); transition: transform .42s cubic-bezier(.16,1,.3,1); }
.sp-platforms [role='tab'][aria-selected='true']::after { transform: scaleX(1); }
/* Number of formats, as an app badge on the tile corner. */
.sp-tab-count { position: absolute; top: 5px; right: max(6px, calc(50% - 30px)); display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #dfe5d7; color: #3f4d3c; font-size: 10.5px; font-weight: 700; line-height: 1; transition: background .25s, color .25s; }
.sp-platforms [role='tab'][aria-selected='true'] .sp-tab-count { background: #1b3627; color: #fff; }
.sp-channel-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 1.45em; margin: 12px 4px 0; color: #5c6a58; font-size: 14px; line-height: 1.45; }
.sp-channel-cap b { color: #17362a; font-weight: 650; }
@media (min-width: 600px) {
  .sp-platforms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sp-platforms [role='tab'] { min-height: 72px; font-size: 12.5px; }
}
/* Front of the peel: the piece of a fictitious client. One photo (4:5, cover) and its text in HTML. */
#laboratorio .sp-campaign-panel .sp-art { position: relative; margin: 0; overflow: hidden; background: #1b211d; }
#laboratorio .sp-campaign-panel .sp-art-photo { object-fit: cover; }
#laboratorio .sp-art-cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: clamp(18px, 4.5vw, 34px); background: linear-gradient(180deg, #0000 38%, #000000d6 92%); color: #fff; pointer-events: none; }
#laboratorio .sp-art-brand { position: absolute; top: clamp(16px, 4vw, 28px); left: clamp(16px, 4vw, 28px); display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 5px; border-radius: 999px; background: #0000005c; font: 600 14px/1.2 var(--sans, Inter, Arial, sans-serif); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#laboratorio .sp-art-brand .cm-mark { display: grid; flex: none; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff; }
#laboratorio .sp-art-brand .cm-mark svg { width: 72%; height: 72%; }
#laboratorio .sp-art-title { max-width: 15ch; font: 700 clamp(30px, 6.4vw, 48px)/1.04 var(--sans, Inter, Arial, sans-serif); letter-spacing: -.035em; text-wrap: balance; }
#laboratorio .sp-art-fine { color: #ffffffd6; font: 500 12.5px/1.4 var(--sans, Inter, Arial, sans-serif); }
.sp-tab-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px -10px #1b36277a, 0 0 0 1px #d6dccf;
  pointer-events: none;
  transition: transform .48s cubic-bezier(.16,1,.3,1), width .4s cubic-bezier(.16,1,.3,1), height .4s cubic-bezier(.16,1,.3,1);
}
.sp-tab-marker.is-instant { transition: none; }
.sp-campaign-art { display: grid; align-items: start; overflow: clip; isolation: isolate; }
.sp-campaign-panel { grid-area: 1 / 1; position: relative; min-width: 0; }
.sp-campaign-panel[hidden] { display: none !important; }
/* Exit-only painting never restores focus or screen-reader ownership. */
.sp-campaign-panel[hidden][data-leaving='true'] { display: block !important; pointer-events: none; }
.sp-campaign-panel > figure { margin: 0; }
.sp-campaign-panel:focus-visible {
  outline: 3px solid #406fca;
  outline-offset: 4px;
}
.sp-platforms [role='tab']:focus-visible { outline: 3px solid #406fca; outline-offset: -2px; }
body.portfolio-r6 .sa-campaign-services {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px 72px;
  margin: 64px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid #d0d6c9;
}
body.portfolio-r6 .sa-campaign-services h3 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.1;
}
body.portfolio-r6 .sa-campaign-services p {
  max-width: 600px;
  margin: 0;
  color: #687262;
  font-size: 16px;
  line-height: 1.7;
}
body.portfolio-r6 .sa-campaign-services ul {
  margin: 0 0 22px;
  padding-left: 18px;
  color: #43573e;
  font-size: 15px;
  line-height: 1.8;
}
body.portfolio-r6 .sa-campaign-services a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid currentColor;
  color: #294334;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 550;
  text-decoration: none;
}
body.portfolio-r6 .sa-campaign-credit {
  margin-top: 32px;
  max-width: 680px;
  color: #687262;
  font-size: 13px;
  line-height: 1.6;
}
body.portfolio-r6 .sa-campaign-credit summary { min-height: 44px; padding-block: 12px; cursor: pointer; }
body.portfolio-r6 .sa-campaign-credit p { margin-top: 4px; }
body.portfolio-r6 #sistemas { padding: 104px 0; background: #182d24; color: #edf0e5; }
.sp-products-shell { display: block; }
.sp-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.sp-products > figure { min-width: 0; margin: 0; }
.sp-products figcaption { padding-top: 24px; }
.sp-products figcaption > span { color: #b7c6b3; font-size: 13px; line-height: 1.5; }
.sp-products h3 {
  margin: 12px 0 0;
  color: #edf0e5;
  font-size: clamp(26px, 2.7vw, 38px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.045em;
}
/* Keep the original mobile pacing and its native-scroll presentation. */
.rg-scroll-shell:not(.rg-natural) { height: calc(var(--rg-count,3) * 110svh); }
.rf-film:not(.rf-natural) { height: calc(var(--rf-heading-height,200px) + 300svh); }

/* Desktop: scene travel is based on bounded reading distance, not screen height.
   100svh used to multiply very tall viewports into thousands of empty pixels.
   The same three animated planes, accessible controls and fixed artwork remain. */
@media (min-width: 761px) {
  .rg-scroll-shell:not(.rg-natural) {
    --rg-scene-height: min(calc(100svh - var(--rg-header, 76px)), 860px);
    height: calc(var(--rg-scene-height) + var(--rg-count, 3) * 690px - 690px);
  }
  .rg-scroll-shell:not(.rg-natural) .rg-sticky {
    height: var(--rg-scene-height);
  }
  .rg-scroll-shell:not(.rg-natural) .rg-plane {
    width: min(100%, 1150px);
    height: min(590px, calc(var(--rg-scene-height) - 168px));
  }
  .rf-film:not(.rf-natural) {
    --rf-scene-height: min(calc(100svh - var(--rf-header, 76px)), 860px);
    height: calc(var(--rf-heading-height, 200px) + var(--rf-scene-height) + 1380px);
  }
  .rf-film:not(.rf-natural) .rf-stage {
    height: var(--rf-scene-height);
  }
  #narrativa-visual .rf-heading {
    padding-top: 52px;
    padding-bottom: 28px;
  }
  body.portfolio-r6 #trabalhos { padding-bottom: 72px; }
}
body.portfolio-r6 #trabalhos { padding-bottom: 104px; }
body.portfolio-r6 #editorial { padding-bottom: 96px; }
.pf-fatos-deck { margin-top: 72px; padding-top: 64px; gap: 40px 80px; }
.pf-fatos-context { min-height: 280px; align-content: start; }
.rf-caption p { min-height: 3em; }
@media (max-width: 760px) {
  body.portfolio-r6 #laboratorio { padding-block: 88px; }
  .sp-campaign { margin-top: 32px; }
  .sp-platforms-wrap { margin-bottom: 18px; }
  body.portfolio-r6 .sa-campaign-services { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; padding-top: 32px; }
  body.portfolio-r6 .sa-campaign-services h3 { font-size: 29px; }
  body.portfolio-r6 .sa-campaign-services p { font-size: 16px; }
  body.portfolio-r6 #sistemas { padding: 80px 0; }
  .sp-products { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .sp-products figcaption { padding-top: 18px; }
  .sp-products h3 { font-size: clamp(27px, 7.4vw, 36px); }
  body.portfolio-r6 #trabalhos { padding-bottom: 80px; }
  body.portfolio-r6 #editorial { padding-bottom: 80px; }
  .pf-fatos-deck { margin-top: 56px; padding-top: 48px; gap: 32px; }
}
@media (max-width: 360px) { .pf-fatos-context { min-height: 340px; } }
@media (prefers-reduced-motion: reduce) {
  .sp-platforms [role='tab'], .sp-tab-marker, .sp-platforms .sp-platform-logo, .sp-platforms [role='tab']::after, .sp-tab-count { transition: none; }
}
body.is-paused .sp-platforms [role='tab'], body.is-paused .sp-tab-marker { transition: none; }