/* ==========================================================================
   NeuroEs · iconos ilustrados (30-sep-2026)
   --------------------------------------------------------------------------
   SOLO neuroes.co. Las fichas de la portada llevaban un SVG de trazo fino a
   medio apagar (opacity .55 + grayscale en el <style> de index.html) y, detrás,
   otro glifo de fondo que ne-2026.css pintaba por nth-child: se veían dos
   dibujos encimados dentro de un cuadrito de 40 px.

   Ahora cada ficha es una imagen WebP ilustrada (arcilla, teal de la marca con
   acento albaricoque) en /img/iconos/<tema>.webp, 192×192 con fondo
   transparente, mostrada a 64 px. Este archivo va DESPUÉS de iconos.css, que
   es compartido e idéntico en neuropsicologia.co y neuropsicologo.co y no se
   toca. Todo se engancha a :has(> img.ico-img), así que una ficha que siga con
   SVG conserva su estilo anterior.
   ========================================================================== */

.ico-img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- tarjetas de servicio ----------------------------------------
   La especificidad (0,5,2) le gana a las reglas nth-child de ne-2026.css
   (0,5,0 con !important) que ponían el glifo de fondo. */
body .services-grid > .service-card:nth-child(n) > .service-icon:has(> img.ico-img) {
  display: grid !important;
  place-items: center !important;
  width: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: radial-gradient(120% 120% at 30% 22%, #FFFFFF 0%, var(--ne-marca-suave, #E6F4F4) 72%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ne-marca, #0A7A7E) 9%, transparent) !important;
  opacity: 1 !important;
  filter: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: transform .25s ease !important;
}
body .services-grid > .service-card:nth-child(n) > .service-icon:has(> img.ico-img) .ico-img {
  width: 64px;
  height: 64px;
}
/* el index giraba y agrandaba la ficha al pasar el ratón; con una ilustración
   basta un leve ascenso */
body .services-grid > .service-card:nth-child(n):hover > .service-icon:has(> img.ico-img) {
  transform: translateY(-3px) !important;
}

@media (max-width: 600px) {
  body .services-grid > .service-card:nth-child(n) > .service-icon:has(> img.ico-img) {
    width: 70px !important;
    height: 70px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
  }
  body .services-grid > .service-card:nth-child(n) > .service-icon:has(> img.ico-img) .ico-img {
    width: 60px;
    height: 60px;
  }
}

/* ---------- credenciales del héroe --------------------------------------
   La ilustración ya trae volumen y sombra: sin ficha de color detrás. */
.cred-row li .cred-icon:has(> img.ico-img) {
  width: 48px !important;
  height: 48px !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.cred-row li .cred-icon .ico-img { width: 48px; height: 48px; }
@media (max-width: 900px) {
  .cred-row li .cred-icon:has(> img.ico-img) { width: 42px !important; height: 42px !important; }
  .cred-row li .cred-icon .ico-img { width: 42px; height: 42px; }
}