/* Section: Agilidade Organizacional */
.section-agilidade-organizacional{
  position: relative;
  width: 100%;
  background: #1f2f60 url('../images/ciberseguranca/ciberseguranca-bg.png') center/cover no-repeat;
  color:#fff;
}

.agilidade-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10em;
  gap: 0;
}

.agilidade-left{
  flex:1 1 55%;
}

.agilidade-right {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.agilidade-hero-icon{
  width: 60%;
  max-width: 420px;
  height: auto;
  opacity: .9;
}

.agilidade-title-row{
  display:flex;
  align-items:center;
  gap:16px;
}

.agilidade-title-icon{
  width:36px;
  height:36px;
}

.agilidade-title{
  margin:0;
  font-size:36px;
  line-height:1.2;
  font-weight:700;
}

.agilidade-title-underline{
  display:inline-block;
  width:38px;
  height:6px;
  background:#ffffff;
  border-radius:4px;
  margin:20px 0 28px;
  opacity:.9;
}

.agilidade-description {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.6;
  text-align: start;
  color: rgba(255, 255, 255, .85);
}

.agilidade-button{
  display:inline-block;
  padding:16px 28px;
  border:2px solid #fff;
  color:#fff;
  border-radius:36px;
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease;
}
.agilidade-button:hover{
  background:#fff;
  color:#1f2f60;
}

/* Responsivo */
@media (max-width: 992px){
  .agilidade-container{ 
    padding:60px 20px; 
    gap:28px;
  }
  .agilidade-title{font-size:40px;}
  .agilidade-description{font-size:20px;}
  .agilidade-hero-icon{max-width:360px;width:80%;}
}

@media (max-width: 768px){
  .agilidade-container{
    flex-direction:column;
    text-align:left;
  }
  .agilidade-right{order:2}
  .agilidade-left{order:1}
  .agilidade-title{font-size:34px;}
  .agilidade-description{font-size:18px;}
}

@media (max-width: 480px){
  .agilidade-title{font-size:28px;}
  .agilidade-title-icon{width:28px;height:28px;}
  .agilidade-title-underline{width:48px;height:4px;margin:16px 0 22px;}
  .agilidade-button{padding:14px 22px;}
}


/* Section: Transformação Ágil nas Empresas */
.section-transformacao-agil{
  background:#F5F8FA;
  width:100%;
}

.transformacao-container{
  max-width:1200px;
  margin:0 auto;
  padding:80px 24px;
}

.transformacao-title{
  margin:0 0 40px 0;
  color:#1F2F60;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500; /* Medium */
  font-size:clamp(32px, 4.5vw, 40px);
  line-height:1.2;
}

.transformacao-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
}

.transformacao-card{
  display:grid;
  grid-template-columns: 40px 1fr; /* ícone + conteúdo */
  column-gap:16px;
  align-items:flex-start;
}

.transformacao-icon{
  width:40px;
  height:40px;
}
.transformacao-icon svg{width:100%;height:100%;display:block}

.transformacao-card-title{
  grid-column:2;
  margin:0 0 8px 0;
  color:#151A2D;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size:16px;
  font-weight:600; /* Semibold */
  line-height:1.4;
}

.transformacao-card-text{
  grid-column:2;
  margin:0 0 14px 0;
  color:#2B2F43;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size:16px;
  font-weight:400; /* Regular */
  line-height:1.7;
}

.transformacao-underline{
  grid-column:2;
  display:inline-block;
  width:56px;
  height:6px;
  background:#FF5315;
  border-radius:4px;
}

/* Responsivo */
@media (max-width: 1100px){
  .transformacao-grid{grid-template-columns:repeat(2, 1fr)}
  .transformacao-title{font-size:clamp(30px, 5.2vw, 38px)}
}


/* Section: Portfólio */
.portfolio{
  background:#FFFFFF;
  width:100%;
}

.portfolio-container{
  max-width:1200px;
  margin:0 auto;
  padding:72px 24px 40px;
}

.portfolio-header{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:40px;
  align-items:flex-start;
  margin-bottom:64px;
}

.portfolio-title{margin:0}
.portfolio-title-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.portfolio-title-dark{color:#151A2D;font-family:'Inter',  sans-serif;font-weight:700;font-size:clamp(30px,4.8vw,48px)}
.portfolio-title-accent{display:block;color:#FF5A1F;font-family:'Inter', sans-serif;font-weight:700;font-size:clamp(30px,4.8vw,48px);line-height:1.15}

.portfolio-subtext{margin:6px 0 0;color:#2B2F43;font-family:'Inter', sans-serif;font-size:20px;line-height:1.7}

.portfolio-cta{
  display:inline-block;
  padding:12px 28px;
  background:#FF5A1F;
  color:#fff;
  border-radius:999px;
  text-decoration:none;
  font-family:'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight:700;
}
.portfolio-cta:hover{filter:brightness(1.05);color:#fff;text-decoration:none}

/* Carrossel 3,5 cards */
.portfolio-cards{position:relative}
.portfolio-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: 315px; /* largura exata do card */
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
  padding-right:120px; /* espaço para o fade à direita para último card aparecer completo */
  scroll-padding-left: 0.1px; /* evita snap estranho no início */
  /* Oculta barra de rolagem */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge antigo */
}
.portfolio-track::-webkit-scrollbar{display:none}
.portfolio-track::-webkit-scrollbar{height:8px}
.portfolio-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:4px}

.portfolio-fade{
  position:absolute;top:0;right:0;bottom:0;width:120px;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 70%);
}

.portfolio-card{
  scroll-snap-align:start;
  background:#F5F8FA; /* fundo exato */
  border-radius:16px;
  /* box-shadow:0 10px 24px rgba(0,0,0,.06); */
  padding:28px 33px 24px; /* 33px nas laterais */
  height:477px; /* altura exata */
  width:334px; /* largura exata */
  display:flex;flex-direction:column;align-items:flex-start;
}
.portfolio-card-kicker{color:#8A8F9C;font-size:18px;font-weight:400;letter-spacing:.01em;margin-bottom:12px; margin-top: 64px;font-family:'Inter', 'Helvetica Neue', Arial, sans-serif}
.portfolio-card-title{margin:0 0 40px 0;color:#151A2D;font-size:28px;font-weight:800;line-height:1.2;font-family:'Inter', 'Helvetica Neue', Arial, sans-serif}
.portfolio-card-text{margin:0 0 18px 0;color:#2B2F43;font-size:20px;font-weight:400;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.portfolio-card-link{margin-top:auto;color:#151A2D;font-weight:400;font-size:16px;text-decoration:none}
.portfolio-card-link:hover {
  text-decoration:none !important;
  color:#FF5315 !important;
}
.portfolio-card-bar{display:block;width:100%;height:8px;background:#1F2C60;border-radius:4px;margin-top:18px}

/* Expansão do texto (Ver mais) */
.portfolio-card.expanded{height:auto}
.portfolio-card.expanded .portfolio-card-text{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  -webkit-box-orient:vertical;
  overflow:visible;
}

.portfolio-nav{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;padding:0 16px;pointer-events:none}
.portfolio-prev,.portfolio-next{
  position:static;transform:none;
  background:#E9E8F9;border:0;border-radius:3px;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:auto
}
.portfolio-prev svg,.portfolio-next svg{display:block}
/* Estados dos botões do carrossel */
/* Esconder o botão anterior somente quando estiver no início */
.portfolio-prev[disabled][data-edge="start"]{opacity:0;visibility:hidden}
/* Manter o botão próximo visível quando estiver no fim, porém desabilitado */
.portfolio-next[disabled][data-edge="end"]{opacity:.35;visibility:visible;cursor:not-allowed}

/* Mantém carrossel em todas as larguras para replicar 3,5 cards */

/* Responsividade: 1 / 2 / 4 colunas */
@media (max-width: 900px){
  .portfolio-header{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .portfolio-track{grid-auto-columns: 100%; padding-right:0}
  .portfolio-card{width:100%}
  .portfolio-fade{display:none}
}
@media (max-width: 720px){
  .transformacao-grid{grid-template-columns:1fr}
  .transformacao-title{font-size:clamp(28px, 7vw, 34px)}
  .transformacao-card-text{font-size:16px}
  .transformacao-container{padding:56px 20px}
}