.card[data-motion="tactile"] {
  --tactile-ms: 220ms;
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.card[data-motion="tactile"] .card-surface,
.card[data-motion="tactile"] .card-shadow {
  transition-property: transform;
  transition-duration: var(--tactile-ms);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.card[data-motion="tactile"] .card-shadow {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 24px;
  background: #0569a2;
  transform: translate(4px, 4px);
  pointer-events: none;
}

.card[data-motion="tactile"] .card-surface {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border: 1px solid var(--blue);
  border-radius: 24px;
  background: #fff;
  text-align: center;
  transform: translateY(0);
}

/* A chapa é irmã da superfície. No hover a superfície sobe 4px,
   então a chapa fica em y 4 para o vão visual continuar 8px. */
.card[data-motion="tactile"][data-state="hover"] .card-surface {
  transform: translateY(-4px);
}

.card[data-motion="tactile"][data-state="hover"] .card-shadow {
  transform: translate(6px, 4px);
}

.card[data-motion="tactile"][data-state="press"] .card-surface {
  transform: translateY(0);
}

.card[data-motion="tactile"][data-state="press"] .card-shadow {
  transform: translate(1px, 1px);
}

.card[data-motion="tactile"].is-held .card-surface,
.card[data-motion="tactile"].is-held .card-shadow,
.card[data-motion="tactile"].is-held .btn img {
  transition: none;
}

#tatil .stage-body {
  grid-template-columns: minmax(0, 1fr);
}

#tatil .canvas { overflow: visible; }

#tatil .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

#tatil .card-icon {
  display: grid;
  place-items: center;
  width: 125px;
  height: 125px;
}

#tatil .card-icon img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

#tatil .card h3 {
  margin: 0;
  color: var(--blue);
  font-family: var(--sora);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.4;
}

#tatil .card p {
  color: var(--slate);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
}

#tatil .card .btn { margin-top: auto; }

#tatil .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 47px;
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: 40px;
  background: var(--blue);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--text-btn);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 160ms ease;
}

#tatil .btn:hover { background: #04588a; }

#tatil .btn img {
  flex: none;
  width: 24px;
  height: 24px;
}

@media (max-width: 900px) {
  #tatil .cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .card[data-motion="tactile"] .card-surface,
  .card[data-motion="tactile"][data-state] .card-surface,
  .card[data-motion="tactile"] .btn img,
  .card[data-motion="tactile"][data-state] .btn img {
    transform: none;
    transition: none;
  }

  .card[data-motion="tactile"] .card-shadow,
  .card[data-motion="tactile"][data-state] .card-shadow {
    transform: translate(4px, 4px);
    transition: none;
  }

  .card[data-motion="tactile"]:has(.btn:active) .card-shadow {
    transform: translate(1px, 1px);
  }
}

.stage.is-reduced .card[data-motion="tactile"] .card-surface,
.stage.is-reduced .card[data-motion="tactile"][data-state] .card-surface,
.card[data-motion="tactile"].is-reduced .card-surface,
.card[data-motion="tactile"].is-reduced[data-state] .card-surface,
.stage.is-reduced .card[data-motion="tactile"] .btn img,
.stage.is-reduced .card[data-motion="tactile"][data-state] .btn img,
.card[data-motion="tactile"].is-reduced .btn img,
.card[data-motion="tactile"].is-reduced[data-state] .btn img {
  transform: none;
  transition: none;
}

.stage.is-reduced .card[data-motion="tactile"] .card-shadow,
.stage.is-reduced .card[data-motion="tactile"][data-state] .card-shadow,
.card[data-motion="tactile"].is-reduced .card-shadow,
.card[data-motion="tactile"].is-reduced[data-state] .card-shadow {
  transform: translate(4px, 4px);
  transition: none;
}

.stage.is-reduced .card[data-motion="tactile"]:has(.btn:active) .card-shadow,
.card[data-motion="tactile"].is-reduced:has(.btn:active) .card-shadow {
  transform: translate(1px, 1px);
}