/* Fotos e composições indicadas nos comentários do Figma, 06/10/2026.
   A copy e os módulos de movimento continuam nas fontes aprovadas. */
.mission-brand-symbol{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 38px}
.tupa-page .challenges-intro{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:44px;align-items:center;margin-bottom:0}
.tupa-page .figma-challenges-photo{position:relative;isolation:isolate;width:100%;max-width:540px;height:auto;aspect-ratio:1.08;margin:0 0 clamp(-90px,-6.5vw,-50px) auto;align-self:end;border-radius:0;background:transparent;overflow:hidden}
.figma-challenges-photo::before,.figma-challenges-photo::after{content:"";position:absolute;inset:0;background:url('../assets/brand/figma-2026-10/symbol-lime.svg') center/contain no-repeat;pointer-events:none}
.figma-challenges-photo::before{z-index:-1}
.figma-challenges-photo::after{top:90%;bottom:-90%;z-index:2}
.tupa-page .figma-challenges-photo img{position:relative;display:block;width:94%;height:auto;margin:0 auto;z-index:1}
#desafios .problem-grid{position:relative;z-index:3}
#galeria{--portrait-baseline-gap:55px}
#galeria .audience-copy{align-self:stretch;position:relative;padding-bottom:355px}
#galeria .audience-portrait{position:absolute;bottom:calc(-1 * var(--portrait-baseline-gap));right:-45px;width:310px;margin:0;pointer-events:none;z-index:1;overflow:hidden}
#galeria .audience-portrait img{display:block;width:100%;height:auto}
#galeria .audience-stage{z-index:2}
#galeria .roadmap{position:relative;z-index:3;margin-top:var(--portrait-baseline-gap)}
.tupa-page #diferenciais.figma-differentials{padding-top:0;padding-bottom:84px}
#diferenciais.figma-differentials .section-width::after{content:none}
.differentials-banner{position:relative;isolation:isolate;min-height:330px;display:flex;align-items:center;margin-bottom:58px;overflow:hidden;background:var(--forest)}
.differentials-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.differentials-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d2a2350,transparent 65%);z-index:-1;pointer-events:none}
#diferenciais .differentials-banner .section-heading{align-items:flex-start;text-align:left;max-width:440px;margin:0;padding-block:48px}
#diferenciais .differentials-banner .section-heading h2{font-size:clamp(30px,2.8vw,40px);line-height:1.18}
#diferenciais .differentials-banner .section-heading p{max-width:350px;color:var(--paper)}
.tupa-page #contato.figma-contact{position:relative;isolation:isolate;overflow:clip;min-height:780px;padding:90px 0;background:var(--forest)}
#contato.figma-contact::before{content:none}
#contato.figma-contact .contact-layout{position:relative;z-index:3;grid-template-columns:1fr 1fr;gap:110px;align-items:start}
#contato.figma-contact .contact-copy{max-width:335px}
#contato.figma-contact .contact-copy h2{font-size:clamp(36px,3.1vw,46px)}
#contato.figma-contact .contact-copy>p{max-width:320px;font-size:16px}
#contato.figma-contact .contact-benefits{margin-top:28px;font-size:11px;gap:12px}
#contato.figma-contact .contact-symbol{display:none}
#contato.figma-contact .contact-photo{position:absolute;z-index:2;left:calc(50% - 465px);bottom:0;width:570px;max-width:none;height:auto;max-height:none;margin:0;overflow:visible;pointer-events:none}
#contato.figma-contact .contact-photo img{display:block;width:100%;height:auto}
#contato.figma-contact .contact-card{position:relative;z-index:3;width:100%;max-width:550px}
.contact-pattern{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:url('../assets/brand/figma-2026-10/proof-pattern.svg') center/620px auto repeat;opacity:.22;mask-image:linear-gradient(90deg,#000,transparent 36%,transparent 62%,#000)}
@media(min-width:1700px){
  .differentials-banner{min-height:360px}
  #contato.figma-contact .contact-photo{width:620px;left:calc(50% - 515px)}
}
@media(max-width:1100px){
  .tupa-page .challenges-intro{gap:25px;grid-template-columns:1.1fr 1fr}
  #galeria .audience-copy{padding-bottom:305px}
  #galeria .audience-portrait{width:260px;right:-32px}
  #contato.figma-contact .contact-layout{gap:75px}
  #contato.figma-contact .contact-photo{width:510px;left:calc(50% - 395px)}
  #contato.figma-contact .contact-copy{max-width:310px}
}
@media(min-width:1201px) and (max-width:1300px){
  #contato.figma-contact .contact-photo{width:510px;left:calc(50% - 395px)}
}
@media(max-width:1200px){
  .tupa-page #contato.figma-contact{display:flex;flex-direction:column;align-items:center;min-height:0;padding:70px 0;gap:0}
  #contato.figma-contact .contact-layout{display:contents}
  #contato.figma-contact .contact-copy{order:0;max-width:560px;width:calc(100% - 48px);text-align:center;z-index:3}
  #contato.figma-contact .contact-copy>p{max-width:420px;margin-inline:auto}
  #contato.figma-contact .contact-benefits{align-items:center}
  #contato.figma-contact .contact-photo{position:relative;order:1;left:auto;bottom:auto;width:min(490px,calc(100% - 32px));margin:28px auto 0;z-index:2}
  #contato.figma-contact .contact-card{order:2;width:calc(100% - 48px);max-width:590px;margin:0 auto;z-index:3}
  .contact-pattern{background-size:500px auto;opacity:.18;mask-image:linear-gradient(90deg,#000,transparent 42%,transparent 58%,#000)}
}
@media(max-width:800px){
  .mission-brand-symbol{width:78px;height:78px;margin-bottom:32px}
  .tupa-page .challenges-intro{grid-template-columns:1fr;gap:26px;margin-bottom:0}
  .tupa-page .challenges-intro>.section-heading{text-align:center;align-items:center}
  .tupa-page .figma-challenges-photo{max-width:440px;margin-inline:auto}
  #galeria .audience-copy{display:grid;grid-template-columns:1fr minmax(190px,.85fr);column-gap:25px;row-gap:20px;padding-bottom:0;align-items:start}
  #galeria .audience-copy #role-description{grid-column:1;grid-row:1}
  #galeria .audience-copy .button{grid-column:1;grid-row:2;justify-self:start}
  #galeria .audience-copy .profile-benefit{grid-column:1;grid-row:3;margin-top:0;padding-top:0;border-top:0}
  #galeria .audience-portrait{position:relative;grid-column:2;grid-row:1/4;width:100%;right:auto;bottom:auto;align-self:end;margin-bottom:-28px}
  #galeria .audience-stage{position:relative}
  #diferenciais .differentials-banner .section-heading{max-width:360px}
  .differentials-banner{min-height:330px}
  .differentials-banner::after{background:linear-gradient(90deg,#0d2a239e,transparent)}
}
@media(max-width:600px){
  #galeria{--portrait-baseline-gap:35px}
  #galeria .audience-copy{display:flex;flex-direction:column;gap:0}
  #galeria .audience-copy #role-description{width:100%}
  #galeria .audience-copy .profile-benefit{padding-top:18px;margin-top:20px;min-height:0}
  #galeria .audience-portrait{width:220px;max-width:78%;align-self:center;margin:12px 0 -28px}
  .differentials-banner{min-height:0;display:block;margin-bottom:38px;padding-top:190px}
  .differentials-photo{height:205px;object-position:65% center}
  .differentials-banner::after{background:linear-gradient(0deg,var(--forest) 0,var(--forest) 50%,transparent 72%)}
  #diferenciais .differentials-banner .section-heading{max-width:100%;padding-block:26px 12px}
  #diferenciais .differentials-banner .section-heading h2{font-size:30px}
  #diferenciais .differentials-banner .section-heading p{max-width:100%;font-size:14px}
  .tupa-page #diferenciais.figma-differentials{padding-bottom:64px}
  .tupa-page #contato.figma-contact{padding:64px 0}
  #contato.figma-contact .contact-copy{width:calc(100% - 40px)}
  #contato.figma-contact .contact-copy h2{font-size:38px}
  #contato.figma-contact .contact-card{width:calc(100% - 32px);padding:25px 22px}
  #contato.figma-contact .contact-card h3{font-size:27px}
  #contato.figma-contact .contact-photo{margin-top:24px}
}