/* ============================================================
   BRAND-FX.CSS
   Visual effects layer — Brand styling, accents, and visual enhancements.
   ============================================================ */

/* ── 1. Dot Grid Texture ─────────────────────────────────── */
.noticias,
.contacto,
.news-reader-modal {
  background-color: var(--velez-blue-dark);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}

.proyectos {
  background-color: var(--velez-blue-main);
  background-image: none;
  position: relative;
}

/* ── 2. Diagonal Light Streaks — Hero ────────────────────── */
.hero__bg-gradient {
  background:
    linear-gradient(
      122deg,
      transparent 15%,
      rgba(7, 66, 138, 0.14) 32%,
      rgba(255, 255, 255, 0.04) 38%,
      transparent 52%
    ),
    linear-gradient(
      122deg,
      transparent 48%,
      rgba(7, 66, 138, 0.08) 62%,
      rgba(255, 255, 255, 0.025) 67%,
      transparent 78%
    ),
    linear-gradient(
      to right,
      var(--velez-blue-dark) 40%,
      rgba(4, 15, 34, 0.85) 70%,
      rgba(4, 15, 34, 0.5) 100%
    );
}

.nosotros__heading,
.noticias__heading,
.proyectos__heading,
.contacto__heading {
  text-shadow: 0 0 35px rgba(2, 59, 239, 0.3);
}

/* ── 3. Gradient Underline Accent on Section Headings ─────── */
.nosotros__heading::after,
.noticias__heading::after,
.proyectos__heading::after,
.contacto__heading::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 0.45rem;
  background: linear-gradient(
    90deg,
    var(--velez-blue-secondary) 0%,
    var(--velez-blue-main)      60%,
    transparent                  100%
  );
}

.proyectos__heading::after,
.contacto__heading::after {
  margin-inline: auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--velez-blue-secondary) 25%,
    var(--velez-blue-secondary) 75%,
    transparent 100%
  );
}

/* ── 4. Shimmer Sweep on Primary Buttons ─────────────────── */
.btn--primary,
.contacto__btn {
  position: relative;
  overflow: hidden;
}

.btn--primary::after,
.contacto__btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn--primary:hover::after,
.contacto__btn:hover::after {
  left: 160%;
}

/* ── 5. Electric Radial Wave — Nosotros ───────────────────── */
.nosotros {
  background-image:
    radial-gradient(ellipse at 50% 110%, rgba(2, 59, 239, 0.18) 0%, transparent 60%);
}

/* ── 6. Soft Glow on Value Cards ─────────────────────────── */
.nosotros__card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.nosotros__card:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.3),
    -4px 0 18px rgba(2, 59, 239, 0.35);
}

/* ── 7. Blue Gradient Tint on News Card Image ───────────── */
.noticia__img-wrap {
  position: relative;
}

.noticia__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(7, 66, 138, 0.55) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.noticia:hover .noticia__img-wrap::after {
  opacity: 1;
}

/* ── 8. Soft Outer Glow on Noticia Card Hover ───────────── */
.noticia:hover {
  box-shadow:
    0 16px 32px -6px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(2, 59, 239, 0.18);
}

/* ── 9. Clean Section Label Badges ────────────────────────── */
.hero__badge,
.nosotros__tag,
.contacto__badge {
  box-shadow: none;
}

/* ── 10. Footer Top Accent + Ambient Bloom ───────────────── */
.footer {
  border-top: 2px solid var(--velez-blue-main);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(7, 66, 138, 0.3) 0%, transparent 55%);
}