/* ================== NEOMORFISMO Equipos ==================
   Variante: TARJETA HUNDIDA + CÍRCULO CON RELIEVE (salido)
   Scope: solo afecta a .equipos-neo para evitar colisiones
   ======================================================= */

.equipos-neo{
  margin: 30px 0;
  text-align: center;
}
.equipos-neo h2{
  margin-bottom: 20px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Grid responsivo */
.equipos-neo__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
  justify-items: center;
}

/* ---------------- Variables del tema (claras) ---------------- */
.equipos-neo{
  --bg: #e9eef5;          /* referencia del fondo externo */
  --surface: #eef3fa;     /* tarjeta */
  --text: #0f172a;

  --shadow-dark: #c7ced8;          /* sombras para neo claro */
  --shadow-light: #ffffff;
  --border: rgba(15,23,42,.06);
  --halo: rgba(15,23,42,.07);

  --circle-bg: #ffffff;            /* círculo blanco */
  --circle-ring: rgba(0,0,0,.06);  /* anillo sutil */

  --green: rgb(34,197,94);         /* glow */
  --green-soft: rgba(34,197,94,.55);
}

/* ---------------- Tarjeta hundida ---------------- */
.equipos-neo .neo-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  padding: 20px 16px 18px;
  width: 100%;
  max-width: 240px;

  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);

  /* INSET shadows => hundida */
  box-shadow:
    inset 16px 16px 36px var(--shadow-dark),
    inset -16px -16px 36px var(--shadow-light);

  text-decoration: none;
  color: var(--text);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.equipos-neo .neo-card:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 12px 12px 28px var(--shadow-dark),
    inset -12px -12px 28px var(--shadow-light);
}

/* ---------------- Círculo con relieve (salido) ---------------- */
.equipos-neo .neo-circle{
  width: clamp(110px, 12vw, 140px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  /* CAMBIO: recortar el contenido para que el logo llene el círculo */
  overflow: hidden;


  background:
    radial-gradient(58% 58% at 50% 40%, var(--circle-ring), transparent 70%),
    var(--circle-bg);
  border: 1px solid rgba(0,0,0,.05);


  /* sombras externas para “elevar” el círculo */
  box-shadow:
    12px 12px 22px rgba(0,0,0,.12),
    -10px -10px 22px rgba(255,255,255,.85),
    0 24px 50px -18px var(--halo);

  transition: box-shadow .22s ease, transform .22s ease;
}


.equipos-neo .neo-card:hover .neo-circle{
  transform: translateY(-2px);
  box-shadow:
    16px 16px 28px rgba(0,0,0,.14),
    -12px -12px 26px rgba(255,255,255,.9),
    0 30px 58px -20px var(--halo);
}

/* ---------------- Glow verde detrás del logo ---------------- */
.equipos-neo .neo-circle::after{
  content:"";
  position:absolute;
  inset: 18%;
  border-radius:50%;
  background: radial-gradient(closest-side, var(--green-soft), rgba(34,197,94,0) 75%);
  filter: blur(14px);
  opacity:0;
  transform: scale(.9);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  pointer-events:none;
}
.equipos-neo .neo-circle:hover::after,
.equipos-neo .neo-card:hover .neo-circle::after{
  opacity:1; transform: scale(1); filter: blur(18px);
}

/* ---------------- Logo (gira al hover) ---------------- */
.equipos-neo .neo-logo{
  /* CAMBIO: llenar el círculo completamente */
  width: 100%;
  height: 100%;
  object-fit: cover;         /* cubre sin deformar, recortado por el círculo */
  object-position: center;
  display: block;
  border: 0; outline: 0; box-shadow: none; background: transparent;

  will-change: transform;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  transform-origin: 50% 50%;
}

/* Mantener el giro al hover (del item o del círculo) */
.equipos-neo .neo-circle:hover .neo-logo,
.equipos-neo .neo-card:hover .neo-logo{
  transform: rotate(1turn) scale(1.02);
}
/* ---------------- Nombre ---------------- */
.equipos-neo .neo-name{
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .1px;
  color: var(--text);
  text-align: center;
}

/* Accesibilidad: respetar reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .equipos-neo .neo-card,
  .equipos-neo .neo-circle,
  .equipos-neo .neo-logo,
  .equipos-neo .neo-circle::after{
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------- Modo oscuro automático (opcional) ---------------- */
@media (prefers-color-scheme: dark){
  .equipos-neo{
    --surface: #12161c;
    --text: #e6e9ef;
    --shadow-dark: rgba(0,0,0,.55);
    --shadow-light: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.06);
    --halo: rgba(255,255,255,.08);
    --circle-bg: #0e1217;
    --circle-ring: rgba(255,255,255,.05);
  }
}