﻿    /* =========================================================
       5b. SECCIÓN DE VALORES – fondo azul + tarjetas oscuras
    ========================================================= */
    .values-section {
      background:
        linear-gradient(145deg, rgba(3,34,102,0.88) 0%, rgba(11,61,145,0.85) 50%, rgba(29,103,193,0.82) 100%),
        url('https://images.unsplash.com/photo-1531206715517-5c0ba140b2b8?auto=format&fit=crop&w=1800&q=60') center/cover no-repeat;
      position: relative;
      overflow: hidden;
    }

    .values-section::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.04), transparent 70%);
      top: -180px;
      right: -150px;
      pointer-events: none;
    }

    /* Light heading overrides */
    .section-head--light h2 {
      color: var(--white);
    }

    .eyebrow--light {
      background: rgba(255,255,255,0.12) !important;
      color: rgba(255,255,255,0.9) !important;
    }

    /* Dark card */
    .stat-card--dark {
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(10px);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                  box-shadow 0.3s ease,
                  background 0.3s ease;
      cursor: default;
    }

    .stat-card--dark:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.13);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                  0 0 0 1px rgba(255,255,255,0.2);
    }

    /* Icon circle */
    .stat-icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.12);
      margin-bottom: 18px;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .stat-card--dark:hover .stat-icon {
      background: rgba(255,255,255,0.22);
      box-shadow: 0 0 20px rgba(255,255,255,0.15);
    }

    .stat-icon svg,
    .stat-icon i {
      width: 26px;
      height: 26px;
      font-size: 1.4rem;
      color: rgba(255,255,255,0.9);
    }

    /* Text on dark bg */
    .stat-card--dark strong {
      display: block;
      font-size: 1.15rem;
      color: var(--white);
      margin-bottom: 8px;
      font-weight: 700;
    }

    .stat-card--dark p {
      color: rgba(255,255,255,0.72);
      font-size: 0.93rem;
      line-height: 1.55;
      font-weight: 400;
    }

