/* ==========================================================================
   template-sobre.php — port direto de dist/sobre/index.html + sobre.HGSGRU7-.css
   Seletores BEM, sem scopes Astro. Preserva o desktop-first do reference (com
   override em @media (max-width:767px)) onde está; mobile-first onde está.
   ========================================================================== */

/* ===== Hero (desktop-first) ============================================ */
.sobre-hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:32px;padding:64px max(var(--container-padding),calc((100% - var(--container-max)) / 2)) 80px;background-color:var(--color-white);overflow:hidden}
.sobre-hero__pattern{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1440px;height:623px;pointer-events:none;z-index:0}
.sobre-hero__pattern img{display:block;width:100%;height:100%}
.sobre-hero__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:32px;max-width:849px;text-align:center}
.sobre-hero__title{font-size:52px;font-weight:500;line-height:56px;color:var(--color-dark-blue);margin:0}
.sobre-hero__subtitle{font-size:18px;font-weight:400;line-height:normal;color:var(--color-text-dark);margin:0;max-width:596px}
@media (max-width:767px){
  .sobre-hero{gap:48px;padding:48px var(--container-padding)}
  .sobre-hero__pattern{width:840px;height:364px}
  .sobre-hero__content{max-width:327px;gap:16px}
  .sobre-hero__title{font-size:32px;line-height:40px}
  .sobre-hero__subtitle{font-size:16px;color:var(--color-text)}
}

/* ===== Mission (logos animados + accordion) ============================ */
.mission{background-color:var(--color-white-2);padding:80px 0}
.mission__container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);display:flex;gap:64px;align-items:flex-start}
.mission__left{flex:0 0 512px;max-width:512px;display:flex;flex-direction:column;gap:40px;overflow:hidden}
.mission__title{font-size:40px;font-weight:500;line-height:48px;color:var(--color-dark-blue);margin:0}
.mission__logos-block{display:flex;flex-direction:column;gap:24px}
.mission__logos-label{font-size:18px;font-weight:500;line-height:normal;color:var(--color-dark-blue);margin:0}
.mission__logos-wrapper{position:relative;overflow:hidden}
.mission__logos-track{display:flex;padding:16px 0;width:max-content;animation:mission-scroll 45s linear infinite}
.mission__logos-wrapper:hover .mission__logos-track{animation-play-state:paused}
.mission__logos-set{display:flex;align-items:center;gap:40px;padding-right:40px;flex-shrink:0}
.mission__logo{height:24px;width:auto;opacity:.4;flex-shrink:0;object-fit:contain}
.mission__logos-fade{position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none}
.mission__logos-fade--left{left:0;background:linear-gradient(to right,var(--color-white-2),transparent)}
.mission__logos-fade--right{right:0;background:linear-gradient(to left,var(--color-white-2),transparent)}
@keyframes mission-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.mission__accordion{flex:1;min-width:0}
.mission__item{position:relative;border-bottom:1px solid var(--color-border-solid)}
.mission__item:last-child{border-bottom:none}
.mission__question{display:flex;align-items:center;gap:12px;width:100%;padding:24px;background:none;border:none;cursor:pointer;text-align:left}
.mission__icon-wrap{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:100px;border:.8px solid var(--color-border-solid);background:var(--color-white);flex-shrink:0}
.mission__question-text{font-size:18px;font-weight:500;line-height:normal;color:var(--color-dark-blue)}
.mission__answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mission__item--open .mission__answer{max-height:300px}
.mission__answer-text{font-size:16px;font-weight:400;line-height:normal;color:var(--color-dark-blue);margin:0;padding:0 24px 24px}
.mission__indicator{position:absolute;bottom:-1px;left:24px;right:24px;height:2px;background:var(--color-blue);opacity:0;transition:opacity .3s ease}
.mission__item--open .mission__indicator{opacity:1}
@media (max-width:767px){
  .mission{padding:48px 0}
  .mission__container{flex-direction:column;gap:40px}
  .mission__left{flex:none;width:100%}
  .mission__title{font-size:24px;line-height:normal;text-align:center}
  .mission__logos-block{display:none}
  .mission__question{padding:20px 0}
  .mission__answer-text{padding:0 0 20px}
  .mission__indicator{left:0;right:0}
}

/* ===== Media (cards de notícias/imprensa) ============================== */
.media{background-color:var(--color-white-2);padding:48px 0;display:flex;flex-direction:column;align-items:center;gap:40px}
.media__container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);width:100%;text-align:center}
.media__title{font-size:32px;font-weight:500;line-height:40px;color:var(--color-dark-blue);margin:0}
.media__grid-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);width:100%}
.media__grid{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory}
.media__grid::-webkit-scrollbar{display:none}
.media__card{flex:0 0 300px;scroll-snap-align:start;display:flex;flex-direction:column;gap:24px;padding:24px;background:var(--color-white);border:1px solid var(--color-border);text-decoration:none;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.media__card+.media__card{margin-left:-1px}
.media__card:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:var(--color-border-solid);z-index:1}
.media__card-header{display:flex;align-items:center;justify-content:space-between}
.media__card-logo{height:48px;width:auto;object-fit:contain}
.media__card-logo-placeholder{height:48px;border-radius:6px;background:var(--color-blue-light)}
.media__card-arrow{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:100px;border:.8px solid var(--color-border-solid);background:var(--color-white);flex-shrink:0;color:var(--color-dark-blue)}
.media__card-title{font-size:16px;font-weight:500;line-height:18px;color:var(--color-text-dark);margin:0}
@media (min-width:768px){
  .media{padding:80px 0;gap:64px}
  .media__title{font-size:40px;line-height:normal}
  .media__grid{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible}
  .media__card{flex:auto;width:auto}
}

/* ===== Cases (carousel mobile, grid desktop) =========================== */
.cases{background-color:var(--color-white);padding:48px 0;display:flex;flex-direction:column;align-items:center;gap:40px}
.cases__container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);width:100%}
.cases__header{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:900px;margin:0 auto}
.cases__heading{font-size:32px;font-weight:500;line-height:40px;color:var(--color-dark-blue);margin:0}
.cases__subtitle{font-size:16px;font-weight:400;line-height:normal;color:var(--color-text-dark);margin:0}
.cases__grid-wrap{position:relative;width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}
.cases__grid-lines{display:none}
.cases__carousel{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory}
.cases__carousel::-webkit-scrollbar{display:none}
.cases__track{display:flex;gap:0}
.cases__card{flex:0 0 280px;scroll-snap-align:start;display:flex;flex-direction:column;gap:24px;padding:24px;background:var(--color-white);border-right:1px solid var(--color-border)}
.cases__card:last-child{border-right:none}
.cases__card-image{width:100%;height:140px;border-radius:12px;overflow:hidden}
.cases__card-image img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.cases__card-desc{font-size:18px;font-weight:500;line-height:normal;color:var(--color-dark-blue);margin:0}
.cases__card-link{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:var(--color-blue);text-decoration:none;transition:opacity .15s}
.cases__card-link:hover{opacity:.7}
@media (min-width:768px){
  .cases{padding:80px 0;gap:64px}
  .cases__heading{font-size:40px;line-height:normal}
  .cases__subtitle{font-size:20px}
  .cases__grid-wrap{padding:0}
  .cases__carousel{overflow:visible}
  .cases__track{display:grid;grid-template-columns:repeat(4,1fr)}
  .cases__card{flex:auto;width:auto}
  .cases__grid-lines{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
  .cases__grid-line--h{position:absolute;left:-40px;right:-40px;height:1px;background:linear-gradient(to right,transparent 0%,rgba(25,31,47,.1) 10%,rgba(25,31,47,.1) 90%,transparent 100%)}
  .cases__grid-line--h1{top:0}
  .cases__grid-line--h2{bottom:0}
  .cases__grid-line--v{position:absolute;top:-40px;bottom:-40px;width:1px;background:linear-gradient(to bottom,transparent 0%,rgba(25,31,47,.1) 15%,rgba(25,31,47,.1) 85%,transparent 100%)}
  .cases__grid-line--v1{left:0}
  .cases__grid-line--v2{right:0}
}

/* ===== Initiatives ===================================================== */
.initiatives{background-color:var(--color-white-2);padding:48px 0;display:flex;flex-direction:column;align-items:center;gap:40px}
.initiatives__container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);width:100%}
.initiatives__header{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.initiatives__title{font-size:32px;font-weight:500;line-height:40px;color:var(--color-dark-blue);margin:0}
.initiatives__grid-wrap{position:relative;width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}
.initiatives__grid-lines{display:none}
.initiatives__grid{display:flex;flex-direction:column;gap:0}
.initiatives__card{display:flex;flex-direction:column;gap:24px;padding:32px;background:var(--color-white);border-bottom:1px solid var(--color-border-solid)}
.initiatives__card:last-child{border-bottom:none}
.initiatives__card-icon-row{display:flex;align-items:center;gap:12px}
.initiatives__card-icon-outer{width:44px;height:44px;border-radius:100px;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;padding:6px;flex-shrink:0}
.initiatives__card-icon-inner{width:32px;height:32px;border-radius:100px;background:var(--color-blue);display:flex;align-items:center;justify-content:center}
.initiatives__card-icon-inner img{filter:brightness(0) invert(1)}
.initiatives__card-title{font-size:20px;font-weight:500;line-height:normal;color:var(--color-dark-blue);margin:0}
.initiatives__card-desc{font-size:16px;font-weight:400;line-height:normal;color:var(--color-dark-blue);margin:0}
.initiatives__card-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;height:42px;border:1px solid var(--color-border);border-radius:100px;background:var(--color-white);font-size:16px;font-weight:500;color:var(--color-dark-blue);text-decoration:none;align-self:flex-start;transition:background-color .2s ease}
.initiatives__card-btn:hover{background-color:var(--color-white-2)}
@media (min-width:768px){
  .initiatives{padding:80px 0;gap:64px}
  .initiatives__grid-wrap{padding:0}
  .initiatives__title{font-size:40px;line-height:48px}
  .initiatives__grid{flex-direction:row}
  .initiatives__card{flex:1;border-bottom:none;border-right:1px solid var(--color-border-solid)}
  .initiatives__card:last-child{border-right:none}
  .initiatives__grid-lines{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
  .initiatives__grid-line--h{position:absolute;left:-40px;right:-40px;height:1px;background:linear-gradient(to right,transparent 0%,rgba(25,31,47,.1) 10%,rgba(25,31,47,.1) 90%,transparent 100%)}
  .initiatives__grid-line--h1{top:0}
  .initiatives__grid-line--h2{bottom:0}
  .initiatives__grid-line--v{position:absolute;top:-40px;bottom:-40px;width:1px;background:linear-gradient(to bottom,transparent 0%,rgba(25,31,47,.1) 15%,rgba(25,31,47,.1) 85%,transparent 100%)}
  .initiatives__grid-line--v1{left:0}
  .initiatives__grid-line--v2{right:0}
}

/* ===== Governança (lista de docs com seta) ============================= */
.governanca{background-color:var(--color-white-2);padding:0 0 48px;display:flex;flex-direction:column;align-items:center;gap:40px}
.governanca__container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);width:100%}
.governanca__header{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:900px;margin:0 auto}
.governanca__title{font-size:32px;font-weight:500;line-height:40px;color:var(--color-dark-blue);margin:0}
.governanca__subtitle{font-size:16px;font-weight:400;line-height:normal;color:var(--color-text-dark);margin:0}
.governanca__grid-wrap{position:relative;width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}
.governanca__grid-lines{display:none}
.governanca__grid{display:flex;flex-direction:column}
.governanca__card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;background:var(--color-white);border-bottom:1px solid var(--color-border);text-decoration:none;transition:background-color .2s ease}
.governanca__card:last-child{border-bottom:none}
.governanca__card:hover{background-color:var(--color-white-2)}
.governanca__card-title{font-size:16px;font-weight:500;line-height:20px;color:var(--color-text-dark)}
.governanca__card-arrow{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:100px;border:.8px solid var(--color-border-solid);background:var(--color-white);flex-shrink:0;color:var(--color-dark-blue)}
@media (min-width:768px){
  .governanca{padding:0 0 80px;gap:64px}
  .governanca__title{font-size:40px;line-height:normal}
  .governanca__subtitle{font-size:20px}
  .governanca__grid-wrap{padding:0}
  .governanca__grid{flex-direction:row}
  .governanca__card{flex:1;border-bottom:none;border-right:1px solid var(--color-border)}
  .governanca__card:last-child{border-right:none}
  .governanca__grid-lines{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
  .governanca__grid-line--h{position:absolute;left:-40px;right:-40px;height:1px;background:linear-gradient(to right,transparent 0%,rgba(25,31,47,.1) 10%,rgba(25,31,47,.1) 90%,transparent 100%)}
  .governanca__grid-line--h1{top:0}
  .governanca__grid-line--h2{bottom:0}
  .governanca__grid-line--v{position:absolute;top:-40px;bottom:-40px;width:1px;background:linear-gradient(to bottom,transparent 0%,rgba(25,31,47,.1) 15%,rgba(25,31,47,.1) 85%,transparent 100%)}
  .governanca__grid-line--v1{left:0}
  .governanca__grid-line--v2{right:0}
}