:root {
      --bg-section: #0b0b0c;
      --text-default: #ffffff;
      --gap: 20px;
      --radius: 12px;

      --card-w: clamp(200px, 15vw, 320px);
      --card-h: calc(var(--card-w) * 1.28);

      --diag-duration: 420ms;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      background: var(--bg-section);
      color: var(--text-default);
    }

    img {
      border: 0;
      display: block;
    }

    /* RENOMEADO: bloco2 (serviços) */
    .bloco2-section {
      padding: 48px 20px 150px 20px;
    }

    .bloco2-wrap {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }

    .alinhador-do.titalo-com-os-cards {
      display: grid;
      grid-template-columns: repeat(3, var(--card-w));
      gap: var(--gap);
      justify-content: center;
      align-items: start;
      width: calc(3 * var(--card-w) + 2 * var(--gap));
      margin: 0 auto 12px auto;
      max-width: 100%;
    }

    .intro-text {
      grid-column: 1 / -1;
      font-size: clamp(26px, calc(var(--card-w) * 0.07), 26px);
      line-height: 1.25;
      margin: 0;
      color: var(--text-default);
      font-weight: 600;
      padding: 0 8px;
    }

    .intro-text .highlight-tech {
      color: #F87171;
    }

    .intro-text .highlight-rev {
      color: #3B82F6;
    }

    .stats-wrap {
      clear: both;
    }

    .stats-grid {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(3, var(--card-w));
      gap: 18px;
      justify-content: center;
      align-items: center;
      margin: 12px auto 0 auto;
      width: 100%;
    }

    /* IMPORTANTE: overflow: visible para evitar corte quando rotacionar */
    .stat-item {
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border-radius: var(--radius);
      padding: 0;
      min-height: var(--card-h);
      overflow: visible;
      /* permitimos a imagem sair do limite do bloco quando inclinada */
    }

    /* wrapper que recebe a rotação/transform — evita clipping e permite transição suave */
    .card-wrap {
      display: block;
      width: 100%;
      max-width: var(--card-w);
      transform-origin: center center;
      will-change: transform;
      transition: transform var(--diag-duration) cubic-bezier(.2, .9, .2, 1);
      transform: rotate(0deg) translateY(0);
    }

    /* classe aplicada no hover/focus para inclinar diagonalmente (agora sempre para a direita por padrão) */
    .card-wrap.is-diagonal {
      transform: rotate(var(--diag-angle, 8deg)) translateY(var(--diag-ty, -6px));
    }

    .card-svg {
      width: 100%;
      height: auto;
      aspect-ratio: 220 / 282;
      object-fit: contain;
      display: block;
      pointer-events: none;
      /* evita captura do evento pelo img; usamos o article para interação */
    }

    @media (prefers-reduced-motion: reduce) {
      .card-wrap {
        transition: none !important;
      }
    }

    /* Responsividade */
    @media (max-width:1000px) {
      :root {
        --card-w: clamp(180px, 28vw, 260px);
        --card-h: calc(var(--card-w) * 1.28);
      }

      .alinhador-do.titalo-com-os-cards {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 18px;
        padding: 0 10px;
      }

      .intro-text {
        grid-column: 1 / -1;
        text-align: center;
      }

      .stats-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        padding: 0 0px;
      }

      .stat-item {
        min-height: auto;
        padding: 12px;
      }

      .card-wrap {
        max-width: 100%;
      }
    }

    @media (max-width:640px) {
      :root {
        --card-w: calc(100% - 24px);
        --card-h: auto;
      }

      .alinhador-do.titalo-com-os-cards {
        grid-template-columns: 1fr;
        padding: 0 12px;
        width: 100%;
      }

      .intro-text {
        font-size: 18px;
        grid-column: 1 / -1;
        text-align: center;
      }

      .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .stat-item {
        padding: 8px;
      }

      .card-wrap {
        max-width: 100%;
      }
    }

    @media (min-width:1400px) {
      .bloco2-wrap {
        max-width: 1400px;
      }
    }

    .stat-item:focus-within {
      outline: 2px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius);
    }

    /* utility: marca cards que não devem inclinar */
    .no-tilt .card-wrap {
      transition: none;
    }