/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO SERVIÇOS — RSTCOM (100% TWIST FIDELITY — HORIZONTAL TRACK COMPLETO)
   Fundo branco geral, com vídeo fullscreen nos diferenciais e animação 3D
   ══════════════════════════════════════════════════════════════════════ */

#servicos.servicos {
  position: relative;
  background-color: #e5e5e5 !important;
  color: #0b0c10;
  padding: 0;
  margin: 0;
  overflow: visible;
  font-family: var(--inter, "Inter", sans-serif);
}

/* ══════════════════════════════════════════════════════════════════════
   TRACK HORIZONTAL PINNED (4 PAINÉIS CONSECUTIVOS)
   Painel 1: Hero com Video Showreel em Card
   Painel 2: Fundo Branco Total ("produtora audiovisual")
   Painel 3: Diferenciais com Vídeo Fullscreen (Print 2 Twist)
   Painel 4: Lista de Serviços 3D com Fundo Branco
   ══════════════════════════════════════════════════════════════════════ */

.servicos-pinned-wrapper {
  position: relative;
  width: 100%;
  height: 580vh;
  /* Altura de rolagem para os 4 estágios horizontais */
  background: #e5e5e5;
  z-index: 2;
}

.servicos-pinned-viewport {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #e5e5e5;
}

.servicos-horizontal-track {
  display: flex;
  flex-direction: row;
  width: 400vw;
  /* 4 painéis de 100vw cada */
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.servicos-panel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   PAINEL 1: HERO COM VÍDEO SHOWREEL
   ══════════════════════════════════════════════════════════════════════ */

.servicos-panel--abertura {
  background: #e5e5e5;
  padding: clamp(1rem, 2vw, 2.5rem);
}

.servicos-hero-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000 url("../assets/SEÇÃO PRINCIPAIS CASES/HAUS DECOR 2025/DSC08895.jpg") center center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.servicos-hero-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.servicos-hero-video-wrap iframe,
iframe.servicos-hero-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
  opacity: 0.7;
  filter: brightness(0.85);
}

video.servicos-hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.7;
  filter: brightness(0.85);
}

.servicos-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.8) 100%),
    linear-gradient(180deg, rgba(7, 9, 13, 0.3) 0%, rgba(7, 9, 13, 0.85) 100%);
  z-index: 2;
  pointer-events: none;
}

.servicos-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  padding: 0 clamp(24px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.servicos-hero-left {
  max-width: clamp(700px, 72vw, 1180px);
  width: 100%;
}

/* Container e Vídeo 3D Transparente de SERVIÇOS */
.servicos-3d-video-wrap {
  position: relative;
  width: 100%;
  max-width: clamp(700px, 72vw, 1180px);
  user-select: none;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.servicos-3d-title-video {
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 480;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 15px 45px rgba(0, 0, 0, 0.7));
}

.servicos-word-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  user-select: none;
}

.servicos-word-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.servicos-word-fragments {
  position: relative;
  display: inline-block;
}

.servicos-fragment {
  font-family: var(--bebas, 'Bebas Neue', sans-serif);
  font-size: clamp(4rem, 9.5vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: 2px;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  color: #ffffff;
  display: block;
  will-change: transform, opacity;
  animation-duration: 1.0s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

.fragment-1 {
  clip-path: polygon(0 0, 100% 0, 100% 24%, 0 20%);
  animation-name: sliceRecompose1;
}

.fragment-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 20%, 100% 24%, 100% 46%, 0 42%);
  color: #f7f7f9;
  animation-name: sliceRecompose2;
}

.fragment-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 42%, 100% 46%, 100% 68%, 0 64%);
  color: #ffffff;
  animation-name: sliceRecompose3;
}

.fragment-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 64%, 100% 68%, 100% 86%, 0 83%);
  color: #ffffff;
  animation-name: sliceRecompose4;
}

.fragment-5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 83%, 100% 86%, 100% 100%, 0 100%);
  color: #f1f2f6;
  animation-name: sliceRecompose5;
}

@keyframes sliceRecompose1 {
  0% {
    transform: translate(-22px, -14px) rotate(-3.2deg);
    opacity: 0;
    filter: blur(5px);
  }

  60% {
    transform: translate(2px, 1px) rotate(0.4deg);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}

@keyframes sliceRecompose2 {
  0% {
    transform: translate(24px, -8px) rotate(2.8deg);
    opacity: 0;
    filter: blur(5px);
  }

  60% {
    transform: translate(-2px, 1px) rotate(-0.3deg);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}

@keyframes sliceRecompose3 {
  0% {
    transform: translate(-18px, 12px) rotate(-2.4deg);
    opacity: 0;
    filter: blur(4px);
  }

  60% {
    transform: translate(1px, -1px) rotate(0.3deg);
    opacity: 1;
    color: #ffffff;
    filter: blur(0);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    color: #ffffff;
    filter: none;
  }
}

@keyframes sliceRecompose4 {
  0% {
    transform: translate(20px, 14px) rotate(2.2deg);
    opacity: 0;
    filter: blur(4px);
  }

  60% {
    transform: translate(-1px, -1px) rotate(-0.2deg);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}

@keyframes sliceRecompose5 {
  0% {
    transform: translate(-14px, 18px) rotate(-2.5deg);
    opacity: 0;
    filter: blur(5px);
  }

  60% {
    transform: translate(1px, 0) rotate(0.2deg);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}

.servicos-lead-subtitle {
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  font-weight: 700;
  color: var(--coral, #ffffff);
  margin-bottom: 18px;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.servicos-lead-desc {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.65;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  margin: 0;
}

.servicos-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

.hero-twist-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.badge-tagline {
  font-size: clamp(1.2rem, 2.2vw, 2.2rem);
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.02em;
  opacity: 0.9;
}

.badge-logo-text {
  font-family: var(--bebas, 'Bebas Neue', sans-serif);
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: 4px;
  color: #ffffff;
  text-transform: uppercase;
}

.hero-scroll-hint {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-scroll-hint .hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral, #ffffff);
  box-shadow: 0 0 8px var(--coral, #ffffff);
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PAINEL 2: FUNDO BRANCO TOTAL (#nos - Twist Slide 2)
   ══════════════════════════════════════════════════════════════════════ */

.servicos-panel--apresentacao {
  background-color: #e5e5e5 !important;
  color: #0b0c10 !important;
  padding: clamp(40px, 8vw, 100px) clamp(24px, 6vw, 90px);
  z-index: 3;
}

.servicos-apresentacao-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-areas:
    "titulo titulo"
    "principal secundario";
  grid-template-columns: 60% auto;
  row-gap: clamp(2rem, 4vw, 4.5rem);
  column-gap: clamp(2rem, 5vw, 5.5rem);
  align-items: flex-start;
}

.apresentacao-twist-titulo {
  grid-area: titulo;
  font-size: clamp(2.8rem, 6vw, 6.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #000000;
  margin: 0;
  font-family: var(--inter, "Inter", sans-serif);
}

.apresentacao-twist-principal {
  grid-area: principal;
  font-size: clamp(1.4rem, 2.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #111318;
  margin: 0;
  font-family: var(--inter, "Inter", sans-serif);
}

.apresentacao-twist-secundario {
  grid-area: secundario;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  font-weight: 400;
  line-height: 1.7;
  color: #4a4e5d;
  margin: 0;
  font-family: var(--inter, "Inter", sans-serif);
}

/* ══════════════════════════════════════════════════════════════════════
   PAINEL 3: DIFERENCIAIS COM VÍDEO FULLSCREEN & ROLAGEM VERTICAL DOS TEXTOS
   Vídeo 100% visível + Textos 100% legíveis em branco puro que avançam no scroll
   ══════════════════════════════════════════════════════════════════════ */

.servicos-panel--diferenciais {
  background: #000000;
  color: #ffffff;
  padding: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Vídeo Fullscreen perfeitamente visível */
.diferenciais-fullscreen-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background: #000000 url("../assets/SEÇÃO PRINCIPAIS CASES/SOGESP 2025 - LIBBS/rs=w_1240,h_620,cg_true.webp") center center / cover no-repeat;
}

.diferenciais-fullscreen-bg iframe,
iframe.diferencial-video-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
  opacity: 1;
  filter: brightness(0.8);
}

video.diferencial-video-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: brightness(0.8);
}

.diferenciais-fullscreen-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Container de Rolagem Vertical dos 5 Diferenciais */
.diferenciais-vertical-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1100px;
  height: 100vh;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.diferenciais-vertical-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Cada um dos 5 itens com contraste impecável e 100% legível */
.diff-vertical-item {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(24px, 5vw, 64px);
  box-sizing: border-box;
  opacity: 1 !important;
  /* Sempre 100% legível, nunca opaco ou ilegível */
}

.diff-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral, #ffffff);
  margin-bottom: 20px;
}

.diff-item-title {
  font-size: clamp(3.5rem, 7.5vw, 6.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 20px 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.9);
  font-family: var(--inter, "Inter", sans-serif);
}

.diff-item-desc {
  font-size: clamp(1.2rem, 2.0vw, 1.8rem);
  font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
  margin: 0 auto;
  max-width: 860px;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.95), 0 1px 5px rgba(0, 0, 0, 0.9);
  letter-spacing: -0.01em;
}

/* Indicador de navegação lateral */
.diff-scroll-progress-dots {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 4;
}

.diff-prog-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.diff-prog-dot.active {
  background: var(--coral, #ffffff);
  transform: scale(1.4);
  box-shadow: 0 0 12px var(--coral, #ffffff);
}

/* ══════════════════════════════════════════════════════════════════════
   PAINEL 4: LISTA DE SERVIÇOS 3D COM FUNDO BRANCO TOTAL (#servicos Twist)
   ══════════════════════════════════════════════════════════════════════ */

.servicos-panel--servicos3d {
  background-color: #e5e5e5 !important;
  color: #0b0c10 !important;
  padding: clamp(30px, 4vw, 60px) clamp(24px, 5vw, 80px);
  z-index: 5;
}

.servicos-3d-layout {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

/* Coluna Esquerda: Faixas 3D com Rotação a 90° em X */
.servicos-strips-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.servicos-strip-item {
  perspective: 1000px;
  position: relative;
  width: 100%;
  outline: none;
  border-radius: 12px;
}

.servicos-strip-3d-box {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.strip-face {
  box-sizing: border-box;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Face Frontal (Em Repouso - Cartão Claro sobre Fundo Branco como na Twist) */
.strip-face--front {
  background: #f1f2f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  width: 100%;
  height: 90px;
  min-height: 90px;
  position: relative;
  z-index: 2;
  transform: rotateX(0deg) translateZ(45px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}

.servicos-strip-item:hover .strip-face--front,
.servicos-strip-item:focus-visible .strip-face--front,
.servicos-strip-item.is-active .strip-face--front {
  opacity: 0;
  pointer-events: none;
}

.strip-face-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.strip-index {
  font-family: var(--bebas, 'Bebas Neue', sans-serif);
  font-size: 1.4rem;
  color: var(--coral, #ffffff);
  letter-spacing: 1px;
}

.strip-category-name {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 700;
  color: #0b0c10;
  margin: 0;
  letter-spacing: -0.01em;
}

.strip-face-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7b8092;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.25s ease;
}

.strip-arrow {
  display: inline-block;
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.servicos-strip-item:hover .strip-face-right,
.servicos-strip-item:focus-visible .strip-face-right {
  color: var(--coral, #ffffff);
}

.servicos-strip-item:hover .strip-arrow,
.servicos-strip-item:focus-visible .strip-arrow {
  transform: translateY(2px);
}

/* Face Ativa (Giro 90° em X - Fundo Preto com Título, Ponto Neon e Texto com Vírgula) */
.strip-face--hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  min-height: 90px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  padding: 0 clamp(16px, 2vw, 26px);
  display: flex;
  align-items: center;
  z-index: 3;
  transform: rotateX(-90deg) translateZ(45px);
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.servicos-strip-item:hover .strip-face--hover,
.servicos-strip-item:focus-visible .strip-face--hover,
.servicos-strip-item.is-active .strip-face--hover {
  opacity: 1;
}

.strip-hover-content {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  width: 100%;
  height: 100%;
}

.strip-hover-title {
  font-family: var(--inter, 'Inter', sans-serif);
  font-size: clamp(0.96rem, 1.12vw, 1.18rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.strip-hover-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8ff00;
  box-shadow: 0 0 10px #c8ff00;
  flex-shrink: 0;
}

.strip-hover-text {
  font-family: var(--inter, 'Inter', sans-serif);
  font-size: clamp(0.74rem, 0.8vw, 0.84rem);
  font-weight: 400;
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  letter-spacing: -0.01em;
  flex: 1;
}

@media (max-width: 991px) {
  .strip-hover-content {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
}

.servicos-strip-item:hover .servicos-strip-3d-box,
.servicos-strip-item:focus-visible .servicos-strip-3d-box,
.servicos-strip-item.is-active .servicos-strip-3d-box {
  transform: rotateX(90deg);
}

/* Coluna Direita: Detalhes Institucionais Twist style */
.servicos-3d-side-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.side-info-tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral, #ffffff);
  margin-bottom: 12px;
}

.side-info-title {
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #000000;
  margin: 0 0 20px 0;
}

.side-info-desc {
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  font-weight: 400;
  line-height: 1.68;
  color: #4a4e5d;
  margin: 0 0 32px 0;
  max-width: 520px;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE (MOBILE & TABLET)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .servicos-hero-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .servicos-hero-right {
    align-items: flex-start;
    text-align: left;
  }

  .servicos-apresentacao-container {
    grid-template-areas:
      "titulo"
      "principal"
      "secundario";
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .diferenciais-fullscreen-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .diferenciais-content-right {
    display: none;
  }

  .servicos-3d-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 991px) {
  .servicos-pinned-wrapper {
    height: auto;
    position: static;
  }

  .servicos-pinned-viewport {
    position: static;
    height: auto;
    overflow: visible;
  }

  .servicos-horizontal-track {
    flex-direction: column;
    width: 100%;
    transform: none !important;
  }

  .servicos-panel {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 60px 5vw;
  }

  .servicos-hero-card {
    height: auto;
    min-height: 540px;
    padding: 40px 20px;
  }

  .servicos-strip-3d-box {
    min-height: auto;
    transform: none !important;
  }

  .strip-face {
    transform: none !important;
  }

  .strip-face--front {
    min-height: auto;
    padding: 18px 22px;
  }

  .strip-face--hover {
    position: static;
    display: none;
    height: auto;
    padding: 18px 22px;
  }

  .servicos-strip-item.is-active .strip-face--front {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: rgba(244, 92, 116, 0.4);
  }

  .servicos-strip-item.is-active .strip-face--hover {
    display: flex;
  }
}

@media (max-width: 600px) {
  .servicos-hero-card {
    min-height: 480px;
    padding: 30px 16px;
    border-radius: 1rem;
  }

  .strip-face--front,
  .strip-face--hover {
    padding: 16px 18px;
  }

  .strip-face-left {
    gap: 14px;
  }

  .strip-services-tags li {
    white-space: normal;
  }
}