/* ====================================================================
   SOBRE — enxuto, mobile-first e performático (v3.5-clean+)
   ==================================================================== */

/* == 01. BASE & TOKENS =============================================== */
.sobre{
  /* layout */
  --wrap-w: 1120px;
  --gutter: clamp(16px, 3.5vw, 24px);
  --read-w: 68ch;
  --ui: Sora, Inter, system-ui, -apple-system, sans-serif;

  /* cores / vidro */
  --glass-bg: rgba(255,255,255,.045);
  --glass-bd: rgba(255,255,255,.08);
  --text-dim: rgba(247,248,255,.70);
  --eyebrow:#9aa1ff;
  --kicker:#cbd2ff;

  /* raios / gaps */
  --card-r: 18px;
  --gap-xs: clamp(10px,3vw,16px);
  --gap-sm: clamp(12px,3.5vw,22px);
  --gap-md: clamp(14px,4vw,28px);
  --gap-lg: clamp(20px,5vw,40px);

  /* marca */
  --brand-1:#6d74ff;
  --brand-2:#9aa1ff;
  --grad-accent: linear-gradient(180deg, var(--brand-1) 0%, var(--brand-2) 100%);

  container-type: inline-size; /* habilita container queries p/ seção */
}

/* == 02. CONTAINERS =================================================== */
.sobre :where(.wrap,.container){
  box-sizing: border-box;                 /* border-box evita hotfix duplicado */
  max-inline-size: var(--wrap-w);
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left,0px))
                  max(var(--gutter), env(safe-area-inset-right,0px));
}

/* == 03. TIPOGRAFIA UTILITÁRIA ======================================= */
.sobre .eyebrow{
  display:inline-block;
  font:700 12px/1 var(--ui);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--eyebrow);
  opacity:.9;
  margin-block-end:.5rem;
}
.sobre .kicker{ color: var(--kicker); }

/* == 04. COMPONENTES REUTILIZÁVEIS =================================== */
.sobre :where(.card,.tcard){
  --card-pd: clamp(14px,3.8vw,18px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--card-r);
  padding: var(--card-pd);
  content-visibility:auto;
}
.sobre :where(.card,.tcard) h3{
  margin:.25rem 0;
  font:700 clamp(16px,3.6vw,20px)/1 var(--ui);
}
.sobre :where(.card,.tcard) p{
  margin:0;
  color: var(--text-dim);
  font-size: clamp(13px,3.2vw,15px);
  line-height: 1.55;
  max-inline-size: var(--read-w);
}

/* == 05. HERO ========================================================= */
.sobre .hero--internal .lead{
  color: var(--text-dim);
  font: 600 clamp(.98rem, 3.2vw, 1.2rem)/1.55 var(--ui);
  max-inline-size: min(var(--read-w), 100%);
  margin: 10px auto 0;
  text-align: center;
  text-wrap: balance;
}

/* == 06. MANIFESTO ==================================================== */
.sobre .manifesto .card{
  --card-pd: clamp(16px, 4.5vw, 28px);
  inline-size: 100%;
  text-align: center;
  contain-intrinsic-size: 220px 820px;
}
@supports (backdrop-filter: blur(10px)){
  .sobre .manifesto .card{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.sobre .manifesto .card > *{ margin-inline:auto; }
.sobre .manifesto .card h3{
  text-align:center;
  margin-block-end: clamp(10px, 2vw, 14px);
}
.sobre .manifesto .card p{
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.65;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--text-dim);
  max-inline-size: clamp(48ch, 75%, 72ch);
  margin: 0 auto;
}

/* == 07. VALORES — título padronizado e respiro ====================== */
.sobre .valores{
  --gap: clamp(12px, 3.5vw, 24px);
  --title-gap: clamp(16px, 4vw, 28px); /* mesmo padrão da grid-dupla */
  container-type: inline-size;
}

/* aplica o mesmo estilo de título já usado em outras seções */
.sobre .valores .title-section{
  width: fit-content;
  margin: 0 auto var(--title-gap);
  text-align: center;
  display: flex;
  align-items: baseline;
  gap: .4em;
}

/* grid inalterado, agora herda o “respiro” do título */
.sobre .valores .grid.cards-3{
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;              /* mobile */
  justify-items: stretch;
  align-items: stretch;
}
@container (min-width: 640px){
  .sobre .valores .grid.cards-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container (min-width: 960px){
  .sobre .valores .grid.cards-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.sobre .valores .grid.cards-3 > *{
  min-width: 0;
  inline-size: 100%;
}
/* centraliza a grade de Valores como as outras seções */
.sobre .valores .grid.cards-3{
  /* garante alinhamento simétrico */
  margin-inline: auto;                 /* centra a grade dentro do container */
  max-inline-size: var(--wrap-w);      /* mesma largura lógica das demais */
  justify-content: center;             /* se sobrar espaço, mantém no centro */
  justify-items: stretch;              /* cards ocupam a coluna toda */
}

/* se a grade NÃO estiver dentro de .wrap, dá o mesmo respiro lateral */
.sobre .valores:not(:has(> .wrap)) .grid.cards-3{
  padding-inline: max(var(--gutter), env(safe-area-inset-left,0px))
                  max(var(--gutter), env(safe-area-inset-right,0px));
}

/* cada item se comporta bem dentro da coluna (sem “puxar” pro lado) */
.sobre .valores .grid.cards-3 > *{
  min-width: 0;
  inline-size: 100%;
}



/* == 08. TIMELINE ===================================================== */
.sobre .timeline{
  display:grid;
  gap: clamp(12px, 4vw, 32px);
  grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr);
  align-items:start;
}
.sobre .tline-col{ display:grid; gap: clamp(18px, 3.6vw, 22px); min-width:0; }
.sobre .tline-center{
  position:relative;
  background: var(--grad-accent);
  border-radius:6px;
  inline-size:12px; block-size:100%;
  content-visibility:auto;
  contain-intrinsic-size:1200px 12px;
}
.sobre .tline-center .dot{
  display:block;
  inline-size:10px; block-size:10px; border-radius:50%;
  background:#0b0d2c; border:2px solid var(--brand-1);
  margin: clamp(32px, 7.5vw, 96px) auto;
  box-shadow:0 0 0 6px rgba(109,116,255,.16);
}
.sobre .tcard{ content-visibility:auto; contain-intrinsic-size:160px 560px; }
.sobre .year{
  color:var(--brand-2);
  font:700 clamp(18px,3.8vw,22px)/1 var(--ui);
  margin:0 0 .25rem;
}
.sobre .t-title{
  margin:0 0 6px;
  font:600 clamp(14px, 3.2vw, 17px)/1.4 var(--ui);
  color: var(--text-dim);
}

@media (max-width:920px){
  .sobre .timeline{ grid-template-columns:1fr; }
  .sobre .tline-center{ display:none; }
  .sobre .tline-col{ display:contents; }
  .sobre .tcard{ margin-block-end: clamp(8px, 3vw, 12px); }
}
.sobre .timeline--single{
  display:grid; grid-template-columns:1fr;
  gap: clamp(14px, 4.5vw, 22px);
}
.sobre .timeline--single .tline-col.center{
  margin:0 auto; max-inline-size:min(720px, 92vw);
}
.sobre .timeline--single .tline-center{ display:none; }

/* == 09. GRID DUPLA (Jornada + Equipe) =============================== */
.sobre .grid-dupla{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px,5vw,40px);
  align-items:start;
}
.sobre :where(.col-jornada,.col-equipe){
  display:flex; flex-direction:column; gap:var(--gap-sm); min-width:0;
}
.sobre .grid-dupla .title-section{
  width: fit-content;
  margin: 0 auto clamp(16px,4vw,28px);
  text-align: center;
  display:flex; align-items:baseline; gap:.4em;
}
@media (max-width:820px){
  .sobre .grid-dupla{ grid-template-columns:1fr; }
}
@media (min-width:1025px){
  .sobre .grid-dupla{ justify-items:stretch; }
  .sobre :where(.col-jornada,.col-equipe){ align-items:stretch; }
  .sobre .col-equipe .team{ justify-items:center; align-items:start; }
}

/* == 10. EQUIPE ======================================================= */
.sobre .team.team--2{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-md);
  justify-items:center;
}
@media (max-width:900px){
  .sobre .team.team--2{ grid-template-columns:1fr; gap: var(--gap-sm); }
}
.sobre .person{
  inline-size:100%;
  max-inline-size: clamp(240px, 30vw, 380px);
  text-align:center;
  margin-inline:auto;
  padding: clamp(10px, 2.2vw, 16px);
  border-radius: var(--card-r);
  content-visibility:auto;
  contain-intrinsic-size:420px 360px;
}
.sobre .person img{
  inline-size:100%;
  aspect-ratio:1/1;
  object-fit:cover; object-position:center;
  border-radius: calc(var(--card-r) - 4px);
  border:1px solid var(--glass-bd);
  background:#111;
  margin-block-end: clamp(10px,2.4vw,14px);
}
.sobre .person h3{
  margin:.35rem 0 .25rem;
  font:800 clamp(18px, 4.6vw, 22px)/1.1 var(--ui);
  letter-spacing:-.01em;
}
.sobre .person .role-main{
  display:block;
  margin:0 0 .25rem;
  font:700 clamp(13.5px, 3.4vw, 15px) var(--ui);
  text-transform: uppercase;
  letter-spacing:.06em;
  color: var(--eyebrow);
}
.sobre .person .role-sub{
  display:block;
  margin:0 0 .75rem;
  font:600 clamp(13px, 3.2vw, 14.5px)/1.2 var(--ui);
  color: rgba(255,255,255,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%;
}
@media (max-width:480px){
  .sobre .person :where(.role-sub,.role-main){ white-space: normal; text-overflow: clip; }
}
.sobre .person .bio{
  margin:0 auto;
  max-inline-size: clamp(48ch, 95%, 58ch);
  font-size: clamp(12.5px, 3vw, 14px);
  line-height: 1.7;
  color: var(--text-dim);
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  text-wrap: balance;
}

/* == 11. RITMO / INTERAÇÕES / A11y =================================== */
.sobre :where(.card,.tcard,.person,.person img){
  transition:
    transform .24s ease,
    box-shadow .28s ease,
    border-color .24s ease,
    background-color .24s ease,
    color .24s ease;
}
@media (prefers-reduced-motion: reduce){
  .sobre :where(.card,.tcard,.person,.person img){ transition:none !important; }
}
@media (hover:hover) and (pointer:fine){
  .sobre :where(.card,.tcard):is(:hover,:focus-within){
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--glass-bd) 60%, #fff 40%);
    box-shadow: 0 16px 44px rgba(0,0,0,.28);
  }
  .sobre .valores .card:is(:hover,:focus-within) .icon{
    background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
    border-color: color-mix(in oklab, var(--glass-bd) 30%, #fff 70%);
    box-shadow: 0 8px 26px rgba(47,55,255,.35);
    color:#fff;
  }
  .sobre .person:is(:hover,:focus-within){
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(0,0,0,.28);
    outline: 1px solid color-mix(in oklab, var(--glass-bd) 40%, #fff 60%);
    outline-offset: 8px;
    border-radius: calc(var(--card-r) + 2px);
  }
  .sobre .person:is(:hover,:focus-within) img{
    border-color: color-mix(in oklab, var(--glass-bd) 40%, #fff 60%);
    box-shadow: 0 10px 30px rgba(47,55,255,.22);
  }
}

/* == 12. RESPONSIVIDADE & SAFETY PACK ================================ */
.sobre :where(h1,h2,h3,p,ul,ol){ margin-block: 0; }
.sobre :where(.intro,.lead){ text-align: start; text-wrap: balance; }
.sobre :where(img,video,svg){ max-width: 100%; height: auto; vertical-align: middle; display:block; }
.sobre :where(figure){ margin: 0; }
.sobre :where(.col, .sobre-col){ min-width: 0; }
.sobre :where(.offset-left,.offset-right){ margin-inline: 0; }
.sobre [style*="transform: translate"], 
.sobre [style*="translate("]{ transform: none !important; }

@media (max-width:820px){
  .sobre{
    overflow-x:clip;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .sobre :where(.timeline,.tline-col,.grid-dupla,.valores .grid.cards-3){ min-width:0; }
}

/* Grids/Flex utilitários: 1 col no mobile; abre no container >=720px */
.sobre :where(.grid, .sobre-grid, .cols, .area-grid){
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  align-items: start;
  justify-items: start;
}
.sobre :where(.row, .flex, .sobre-row){
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-md);
}
@container (min-width: 720px){
  .sobre :where(.grid, .sobre-grid, .cols, .area-grid){
    grid-template-columns: 1fr 1fr;
    justify-items: initial;
  }
  .sobre :where(.row, .flex, .sobre-row){
    flex-direction: row;
    align-items: center;
  }
}