/* site.css */

@layer utilities {
  .logoHome {
    width: 12vh;
  }

  .fontNav {
    /* Si quieres aplicar Rajdhani para el menú deportivo: */
    font-family: var(--font-display);

    /* O si prefieres la fuente por defecto (Inter): */
    /* font-family: var(--default-font-family); */
  }

  .bg-navHome {
    background-color: var(--bg-navHome);
  }

  /* Aplica un margen superior de desplazamiento a cualquier sección con id */
  section[id] {
    scroll-margin-top: 110px; /* Ajusta este valor a la altura real de tu menú */
  }

  /* Opcional: Para asegurar que el desplazamiento nativo sea suave */
  html {
    scroll-behavior: smooth;
  }

  /* Soporte neón dinámico para resúmenes de pago */
  .card-neon {
    position: relative;
    border-radius: 1rem;
    background: rgba(12, 12, 28, 0.95);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .card-neon::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 1.05rem;
    background: conic-gradient(
      from var(--nn-crd-a),
      var(--c1) 0deg,
      var(--c2) 90deg,
      transparent 130deg,
      transparent 230deg,
      var(--c2) 270deg,
      var(--c1) 360deg
    );
    animation: nn-crd-spin 3s linear infinite;
    z-index: 0;
  }

  .card-neon::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: 0.95rem;
    background: #070913;
    z-index: 1;
  }

  .card-neon > * {
    position: relative;
    z-index: 2;
  }

  .card-cyan {
    --c1: #00eeff;
    --c2: rgba(0, 238, 255, 0.3);
  }

  .card-pink {
    --c1: #f59e0b;
    --c2: rgba(245, 158, 11, 0.3);
  }

  .card-violet {
    --c1: #bf5fff;
    --c2: rgba(191, 95, 255, 0.3);
  }

  .card-cyan::before {
    box-shadow:
      0 0 28px rgba(0, 238, 255, 0.45),
      0 0 60px rgba(0, 238, 255, 0.2);
  }

  .card-pink::before {
    box-shadow:
      0 0 30px rgba(245, 158, 11, 0.4),
      0 0 60px rgba(245, 158, 11, 0.15);
  }

  .card-violet::before {
    box-shadow:
      0 0 28px rgba(191, 95, 255, 0.45),
      0 0 60px rgba(191, 95, 255, 0.2);
  }
}