/* ============================================================
   08 — RESPONSIVO (adaptação mobile / tablet)
   ============================================================ */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .services-grid,
  .diff-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split-visual {
    max-width: 560px;
  }

  .process {
    grid-template-columns: 1fr 1fr;
  }

  .hero-badge-1 {
    left: 0;
  }

  .hero-badge-2 {
    right: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Mobile ---- */
@media (max-width: 820px) {
  .nav-list {
    gap: 22px;
  }

  .nav-cta {
    display: none;
  }
}

@media (max-width: 720px) {
  /* ---- Navegação móvel (overlay) ---- */
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(5, 6, 10, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 44px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .nav-link {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-soft);
    display: block;
    padding: 10px 16px;
  }

  .nav-link::after {
    display: none;
  }

  .nav-cta {
    display: inline-flex;
  }

  .site-header.is-scrolled {
    background: rgba(8, 10, 16, 0.9);
  }

  /* ---- Hero ---- */
  .hero {
    padding-top: calc(var(--header-h) + 40px);
  }

  .hero-visual {
    margin-top: 48px;
  }

  .window-body {
    grid-template-columns: 1fr;
  }

  .window-files {
    display: none;
  }

  .window-code {
    font-size: 0.76rem;
    padding: 18px 18px 22px;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
    margin-top: 56px;
    padding-top: 32px;
  }

  .hero-badge {
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  .hero-badge-1 {
    top: -18px;
    left: -8px;
  }

  .hero-badge-2 {
    bottom: -16px;
    right: -8px;
  }

  /* ---- Processo ---- */
  .process {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .process::before {
    left: 14px;
  }

  /* ---- CTA ---- */
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

 /* ============================================================
   SOBRE — interação mobile baseada no centro da tela
   ============================================================ */

.split-visual {
  position: relative;
}

/* ------------------------------------------------------------
   IMAGEM
   ------------------------------------------------------------ */

.split-visual .img-placeholder-sobre {
  transform: scale(1);
  transform-origin: center center;

  transition:
    transform 0.7s var(--ease),
    filter 0.7s var(--ease);

  will-change: transform, filter;
}


/* ------------------------------------------------------------
   ESTADO ATIVO — visual chegou ao centro da tela
   ------------------------------------------------------------ */

.split-visual.is-center-active .img-placeholder-sobre {
  transform: scale(1.08);
}

/* Card sai da imagem e fica apenas um pouco abaixo */

.split-visual.is-center-active .float-card {
  bottom: -88px;
  transform: translateY(0);

  border-color: var(--blue-bright);

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(59, 130, 246, 0.25),
    0 0 38px rgba(59, 130, 246, 0.12);
}

/* ------------------------------------------------------------
   01 / 02 / 03 — destaque quando chegam ao centro da tela
   ------------------------------------------------------------ */

/* Mesmo deslocamento usado no hover do desktop */
.principle.is-center-active {
  transform: translateX(8px);
}

/* Mesmo destaque do número usado no hover do desktop */
.principle.is-center-active .principle-num {
  transform: translateY(-2px) scale(1.08);
  background: var(--blue-glow);
  border-color: var(--blue-bright);

  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.08),
    0 0 18px rgba(59, 130, 246, 0.22);
}

/* Mesmo pequeno deslocamento do título */
.principle.is-center-active strong {
  transform: translateX(3px);
  color: var(--text);
}

/* Mesmo pequeno deslocamento da descrição */
.principle.is-center-active span:last-child {
  transform: translateX(3px);
  color: var(--text-soft);
}

/* ------------------------------------------------------------
   ESPAÇO EXTRA PARA O CARD
   ------------------------------------------------------------ */

.split-visual {
  margin-bottom: 35px;
}

/* ------------------------------------------------------------
   GRÁFICO — estado normal
   ------------------------------------------------------------ */

.float-card .graph-line {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
}

/* ------------------------------------------------------------
   GRÁFICO — anima quando o visual chega ao centro
   ------------------------------------------------------------ */

.split-visual.is-center-active .graph-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;

  animation:
    graphDraw 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

    /* ============================================================
     DIFERENCIAIS — destaque durante o scroll
     ============================================================ */

  .diff-card {
    transition:
      transform 0.45s var(--ease),
      border-color 0.45s var(--ease),
      box-shadow 0.45s var(--ease),
      background 0.45s var(--ease);
  }

  .diff-card.is-active {
    transform: translateY(-4px);
    border-color: rgba(72, 139, 255, 0.55);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.20),
      0 0 22px rgba(48, 122, 255, 0.10);
  }

  .diff-card.is-active .diff-icon {
    transform: scale(1.06);
    filter: drop-shadow(0 0 8px rgba(48, 122, 255, 0.28));
  }

  .diff-card .diff-icon {
    transition:
      transform 0.45s var(--ease),
      filter 0.45s var(--ease);
  }

  /* ============================================================
   PORTFÓLIO — destaque do card no centro da tela
   ============================================================ */

.portfolio-card.is-active {
  transform: translateY(-6px);
  border-color: var(--line-blue);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.portfolio-card.is-active .portfolio-media img {
  transform: scale(1.06);
}
}

/* ---- Celular pequeno ---- */
@media (max-width: 520px) {
  .container {
    padding-inline: 20px;
  }

  .services-grid,
  .diff-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }


  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .hero-badge-2 {
    display: none;
  }

  /* ---- Diferenciais empilhados: apenas o card ativo cresce levemente;
       o card imediatamente acima sobe um pouco e o imediatamente abaixo
       desce um pouco, abrindo espaço sem sobreposição, sem saltos bruscos
       e sem redimensionar os demais cards ---- */
  .diff-card:hover,
  .diff-card.is-active {
    transform: translateY(-6px) scale(1.04);
  }

  .diff-grid:has(.diff-card:hover),
  .diff-grid:has(.diff-card.is-active) {
    gap: 30px;
  }

  .diff-card:has(+ .diff-card:hover),
  .diff-card:has(+ .diff-card.is-active) {
    transform: translateY(-5px);
  }
}

/* ============================================================
   DIFERENCIAIS — interação desktop
   ============================================================ */

@media (min-width: 721px) {

  .diff-card {
    transition:
      transform 0.45s var(--ease),
      border-color 0.45s var(--ease),
      box-shadow 0.45s var(--ease),
      background 0.45s var(--ease);
  }

  .diff-card:hover {
    transform: translateY(-5px);
    border-color: rgba(72, 139, 255, 0.55);
    box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.22),
      0 0 24px rgba(48, 122, 255, 0.10);
  }

  .diff-card:hover .diff-icon {
    transform: scale(1.06);
  }

  .diff-icon {
    transition:
      transform 0.45s var(--ease),
      color 0.45s var(--ease),
      filter 0.45s var(--ease);
  }

}