/* Efecto «hover» (Mati, 10/11): el estanque contesta. El borde de la tarjeta o fila bajo el cursor se intensifica sólo en
   el tramo cercano (el color del texto de su set a media intensidad: oscurece sobre crema, aclara sobre navy); sin glow,
   sombras ni acento. Con foco de teclado se intensifica parejo. Nada de esto recibe el puntero. fx/hover.js pone la
   posición del cursor (--mx/--my, px desde la esquina del elemento); el acercamiento de los koi lo resuelve el motor.
   Tarjetas: un elemento propio (.koi-edge, lo agrega fx/hover.js), porque los dos pseudo-elementos de la tarjeta los usa
   el vidrio líquido en hover. Filas: su ::after, que está libre (un elemento adentro de .svc-row, que es un <li>, entraría
   en la medida del texto que los koi esquivan y agrandaría el obstáculo). */
html.fx-hover :is(.card, .pcard, .explore-list a, .way) { position: relative; } /* .svc-row ya lo tiene */
html.fx-hover .koi-edge,
html.fx-hover :is(.explore-list a, .way, .svc-row)::after {
  --koi-edge: color-mix(in srgb, var(--fg) 56%, transparent);
  position: absolute; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity .32s cubic-bezier(.16, 1, .3, 1);
}

/* tarjetas: un anillo de 1 px sobre el borde (máscara: todo menos el interior) con un degradé radial centrado en el cursor */
html.fx-hover :is(.card, .pcard) > .koi-edge {
  inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), var(--koi-edge), var(--koi-edge) 12%, color-mix(in srgb, var(--fg) 24%, transparent) 48%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* .pcard recorta su contenido (la foto con esquinas redondeadas): el anillo cae sobre el borde, 1 px afuera del recorte.
   Con overflow: clip + 1 px de margen el borde queda a la vista y la foto se recorta igual; el anillo del vidrio líquido,
   que hoy queda recortado en estas tarjetas, se mantiene oculto para que se vean como siempre. Sin soporte (Safari), el
   hilo va 1 px adentro del borde. */
@supports (overflow-clip-margin: 1px) {
  html.fx-hover .pcard { overflow: clip; overflow-clip-margin: 1px; }
  html.fx-hover .pcard.liquid::after { visibility: hidden; }
}
@supports not (overflow-clip-margin: 1px) {
  html.fx-hover .pcard > .koi-edge { inset: 0; border-radius: calc(var(--r-2) - 1px); }
}

/* filas: el hilo de abajo, más intenso en el tramo cercano a la x del cursor */
html.fx-hover :is(.explore-list a, .way, .svc-row)::after {
  content: ""; left: 0; right: 0; bottom: -1px; height: 1px;
  background: radial-gradient(220px 40px at var(--mx, -999px) 50%, var(--koi-edge), var(--koi-edge) 12%, color-mix(in srgb, var(--fg) 24%, transparent) 48%, transparent 100%);
}

@media (hover: hover) and (pointer: fine) {
  html.fx-hover :is(.card, .pcard):hover > .koi-edge,
  html.fx-hover :is(.explore-list a, .way, .svc-row):hover::after { opacity: 1; }
}
/* foco de teclado: el borde entero, parejo (paridad con el mouse) */
html.fx-hover :is(.card, .pcard):focus-visible > .koi-edge,
html.fx-hover :is(.explore-list a, .way):focus-visible::after { opacity: 1; background: var(--koi-edge); }

@media (prefers-reduced-motion: reduce) {
  html.fx-hover .koi-edge, html.fx-hover :is(.explore-list a, .way, .svc-row)::after { transition: none; }
}