/* ===== Sobre body (flow, green) — faithful port of sobre.html inline <style> ===== */
/* FUNDO image starts at canvas y=363; .sobre starts at canvas 465 → shift up 102px (6.375rem) to kill the green band under the nav */
/* Full FUNDO composite = the design's exact background (green + decorations + panel, all baked). Offset −6.375rem to align (FUNDO starts at canvas 363, .sobre at 465). */
/* Background: baked art WITHOUT the bottom strip (cropped at image row 5788) so content growth
   (new team members) extends the page gracefully: below the art, a grain tile over the band teal
   continues the texture, and the strip is its own element glued above the footer. */
/* QA 26/08: grain removed sitewide ("tirar o granulado… deixar verde") — the baked
   art was denoised and the grain tile below it replaced by the flat band teal. */
.sobre{
  background-image:url('../../img/sobre-fundo-psd.webp?v=2');
  background-position:center -29.0625rem;
  background-size:100% auto;
  background-repeat:no-repeat;
  background-color:#15806E;
  padding-bottom:0;
}

/* Team wrapper IS the dark panel now (CSS, grows with content). Geometry from the baked art:
   insets 79px, top 2083 (31px below the old .teams top), bottom 5990, radius 150px TL/BR.
   Baked panel remains underneath and stays covered while content matches; extra members just
   stretch the CSS panel over the band. */
.teams{
  margin:6.75rem 4.8125rem 0;
  padding-top:9.1875rem;
  padding-bottom:7.25rem;
  background:#086653;   /* grain tile dropped (QA 26/08) — flat panel green */
  border-radius:10rem 0 10rem 0;
}

/* microscopy strip: element (was baked in the bg tail); gap panel-bottom→strip = 163px */
.sobre-strip{height:9.5625rem;margin-top:9.75rem;background:url('../../img/sobre-strip.webp') center top / 100% 100% no-repeat}

/* História */
.historia{padding:10.75rem var(--inset) 0}
.historia__title{margin:0;font-weight:300;font-style:italic;text-transform:uppercase;font-size:3.906rem;line-height:1;letter-spacing:0.01em;color:var(--teal)}
.lead{margin:3.1875rem 0 0;max-width:69.75rem;font-weight:300;font-style:italic;font-size:1.5625rem;line-height:1.389;letter-spacing:0.01em}
.video{margin:6.625rem 0 0;max-width:80.06rem;position:relative;z-index:2}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:0.75rem;display:block;background:#000;box-shadow:0 0.75rem 1.5rem rgba(0,0,0,.35)}
.mission{position:relative;z-index:1;margin:-22.8rem -3.75rem 0 -3.5rem;max-width:none;background:rgba(31,35,49,.702);border-radius:1.25rem;padding:28.9375rem 3.5rem 3.5rem}
.mission__title{margin:0;font-weight:400;font-style:italic;text-transform:uppercase;font-size:2.4975rem;line-height:1;letter-spacing:0.01em}
.mission__title span{color:var(--teal)}
.mission__text{margin:2.1875rem 0 0;max-width:61rem;font-weight:300;font-style:italic;font-size:1.75rem;line-height:1.464;letter-spacing:0.01em}

/* Equipe sections */
.equipe{padding:0 11.375rem} /* 259px abs: 77px panel inset + 182px */
/* PSD shows only thin eyebrow rules between groups (Line 2/3, 5px, #DBEDE9) — no heavy full-width dashed rule. Keep a subtle thin dashed line for group separation, tightened to the PSD's ~106–133px inter-group gap. */
/* design has no rule between groups — spacing only (PSD: usuários +32px, técnica +80px) */
.equipe + .equipe{margin-top:1.875rem}
.equipe:last-of-type{margin-top:5rem}
.equipe:last-of-type .people--3{margin-top:10.3125rem} /* PSD: fotos da técnica em y5104 */
.equipe__head{display:flex;align-items:flex-end;gap:1.75rem;margin:0 0 7.0625rem;position:relative}
.equipe__titles{flex:0 0 auto}
.equipe__small{display:block;font-weight:300;font-style:italic;font-size:3.906rem;line-height:1;letter-spacing:0.01em;color:#d9f2ec}
.equipe__big{display:block;margin:-0.5rem 0 0;font-weight:500;font-style:italic;font-size:3.906rem;line-height:1;letter-spacing:0.01em;padding-left:3.8125rem}
/* two decorative lines: short LEFT at EQUIPE (top) level, long RIGHT at big-title (bottom) level; both bleed past the .equipe 12% inset toward the panel edges */
/* Client QA 27/08 ("linha cheia em todas as páginas"): both lines must bleed to
   the CANVAS edges (PSD: eyebrow starts at x0, rule ends at x1799) at full color. */
.equipe__eyebrow-line{position:absolute;left:-16.1875rem;top:0.55rem;width:15.3125rem;height:0.3125rem;background:#d9f2ec}
.equipe__rule{flex:1 1 auto;align-self:flex-end;height:0.3125rem;background:#d9f2ec;margin:0 -16.1875rem 0.9rem 0}

.people{display:grid;grid-template-columns:1fr 1fr;column-gap:7rem;row-gap:3.3125rem}
.people--3{grid-template-columns:repeat(3,1fr);column-gap:4.5rem;row-gap:3.3125rem;align-items:start}
.people__sep{border:0;width:59.25rem;max-width:100%;height:0.1875rem;background:#d9f2ec;opacity:.5;margin:4.9375rem auto 7.875rem}
.people > .people__sep{grid-column:1/-1;margin:1.6875rem auto 0}

.person{display:flex;gap:1.375rem;align-items:center}
.person--stack{flex-direction:column;align-items:flex-start;gap:2.4375rem}
.person__photo{width:10.375rem;height:10.375rem;border-radius:50%;object-fit:cover;flex:0 0 auto;background:rgba(255,255,255,.06)}
.person__text{flex:1;min-width:0;font-size:1.302rem;line-height:1.1365;letter-spacing:normal}
.person__text span{display:block}
.person__text b{font-weight:700}
.person__text a{color:inherit;text-decoration:none}
.person__text a:hover,.person__text a:focus-visible{text-decoration:underline}
.person__text .lattes{font-size:1.125rem;line-height:1.39;word-break:break-word;overflow-wrap:anywhere}
.person__bio{margin:1.5625rem 0 0;font-size:1.3rem;line-height:1.1365;letter-spacing:-0.015em}

/* ===== Responsive ===== */
@media (max-width:60rem){
  /* design's manual line breaks are for the 1800px layout — reflow on mobile */
  .lead br,.mission__text br{display:none}
  .historia{padding-top:3rem}
  .video{margin-top:2.5rem}
  /* mobile QA 03/09: the baked desktop composite (with its baked mission panel)
     showed as a phantom second card behind the CSS one — flat green on phones */
  .sobre{background-image:none}
  /* drop the desktop overlap on mobile + scale the mission card type down
     (títulos padronizados com os demais headings mobile) */
  .mission{margin:2rem 0 0;padding:1.75rem 1.5rem;max-width:100%}
  .mission__title{font-size:clamp(1.5rem,6.5vw,2rem)}
  .mission__text{font-size:1.05rem;line-height:1.45;margin-top:1rem}
  .equipe{padding:3.5rem 0 0}
  .equipe__sep{margin:3.5rem 0}
  .equipe__head{flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
  .equipe__titles{flex:1 1 auto;min-width:0}
  .equipe__rule{flex-basis:100%;order:3;margin:0}
  .equipe__eyebrow-line{display:none}
  .person__text b{overflow-wrap:anywhere}
  .people,.people--3{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .person{gap:1rem}
  /* mobile QA 02/09: the dark panel kept its 77px desktop side margins, squeezing
     content to ~220px — member cards wrapped one letter per line and the 62px
     titles bled off-screen. Full-width panel + viewport-scaled titles + smaller
     photos give the text real room. */
  .teams{margin:2.5rem 0.75rem 0;padding:2.5rem 1.25rem;border-radius:2.5rem 0 2.5rem 0}
  .equipe__small,.equipe__big{font-size:clamp(1.7rem,7.5vw,2.6rem)}
  /* QA 02/09: kill the desktop -0.5rem overlap (lines were colliding) and the
     PSD-exact desktop gaps (79/126px separators, 165px técnica offset) */
  .equipe__big{padding-left:1.25rem;margin-top:0.35rem}
  .historia__title{font-size:clamp(2rem,9vw,2.8rem)}
  .people__sep{margin:2rem auto 2.5rem}
  .equipe:last-of-type{margin-top:0}
  .equipe:last-of-type .people--3{margin-top:2rem}
  .equipe + .equipe{margin-top:1.5rem}
  .person__photo{width:6.5rem;height:6.5rem}
  /* QA 03/09: standardize member cards on mobile — photo BESIDE the text (the
     desktop "vertical" format stacked it above). EXCEPT equipe técnica (last
     section): long bios keep the stacked layout, per Bruna. */
  .equipe:not(:last-of-type) .person--stack{flex-direction:row;align-items:center;gap:1rem}
  .person__text{font-size:1.05rem;line-height:1.3}
  .person__text .lattes{font-size:0.9rem}
  .person__bio{font-size:1.05rem;line-height:1.35}
  .people__sep{width:100%}
}