:root {
  --space: 1rem;
  --surface-1: #101012;
  --surface-2: #27272a;
  --surface-3: #52525b;
  --ease-out: cubic-bezier(0.5, 1, 0.89, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

/* 1. Base del contenedor principal .card */

.card-i {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-areas: "card-i";
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  isolation: isolate;
  transition: border-color 200ms ease-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 8px;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.359);
}

/* 2. Capa ::before */

.card-i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  /*CAMBIO: Se cambió el prefijo 'cqi' (Container Query Units) por 'rem' o '%';*/
  box-shadow: var(--bg) -0.5rem 0.5rem 2.5rem inset;
  transition: opacity 900ms ease-out;
}

/* 3. Capa ::after */

.card-i::after {
  content: "";
  position: absolute;
  border: 0px solid transparent;
  inset: 0;
  margin: auto;
  aspect-ratio: 1;
  background: radial-gradient(circle, #09090b, transparent 65%);
  opacity: 0;
  transition: opacity 800ms ease-out, border-width 400ms ease-out, border-color 400ms ease-out;
}

/* 4. Elementos hijos directos */

.card-i > * {
  grid-area: card-i;
}

/* 5. Icono SVG interno */

.card-i svg {
  position: relative;
  z-index: 1;
  width: 30%;
  height: auto;
  color: black;
  transition: 300ms ease-out;
  transition-property: color, scale;
}

/* 6. Botón oculto */

.card-i button {
  opacity: 0;
}

/* 7. Accesibilidad por teclado */

.card-i:focus-within {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

/* 8. Estados Hover y Focus integrados (Eliminando :where por si acaso) */

.card-i:hover, .card:focus-within {
  border-color: var(--active-color, var(--fg));
  transition: border-color 800ms ease-in-out;
  border: 5px solid var(--active-color) !important;
}

.card-i:hover svg, .card:focus-within svg {
  color: var(--active-color, var(--fg));
  scale: 1.1;
  transition: 300ms ease-in-out;
}

.card-i:hover::before, .card-i:focus-within::before {
  opacity: 0;
}

.card-i:hover::after, .card-i:focus-within::after {
  opacity: 1;
}

.card-i-b {
  border-radius: 8px;
}

a:hover .card-i::before {
  background: transparent !important;
}

/* Cuando pases el cursor por el enlace, encendemos el ::after de la tarjeta */

a:hover .card-i::after {
  opacity: 1 !important;
}

/* Si quieres usar el fondo de superficie que mencionaste en tu última clase */

a:hover .card-i {
  background-color: rgb(50, 50, 50) !important;
  color: white;
}