/* sync pages/publicas/sobre/index.html */

    body {
      font-family: 'Montserrat', sans-serif;
      background:
        radial-gradient(circle at 16% 10%, rgba(255, 215, 0, 0.10) 0%, transparent 24%),
        radial-gradient(circle at 82% 8%, rgba(212, 175, 55, 0.08) 0%, transparent 22%),
        linear-gradient(180deg, #2b2b2b 0%, #1a1a1a 42%, #111111 100%);
      color: #fff;
      overflow-x: hidden;
    }

    h1, h2, h3, h4 { font-family: 'Cinzel', serif; }

    .glass {
      background: linear-gradient(180deg, rgba(58, 58, 58, 0.34) 0%, rgba(23, 23, 23, 0.86) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(212, 175, 55, 0.2);
    }

    .gold-text-gradient {
      background: linear-gradient(135deg, #d4af37 0%, #f7e1ad 50%, #aa8b2c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .btn-gold {
      background: linear-gradient(135deg, #d4af37 0%, #f7e1ad 50%, #aa8b2c 100%);
      color: #111111;
      font-weight: 700;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 10px 26px rgba(212, 175, 55, 0.24);
    }

    .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 32px rgba(212, 175, 55, 0.38);
    }

    .hero-panel,
    .section-card,
    .timeline-card,
    .stat-card,
    .cta-panel {
      background: linear-gradient(180deg, rgba(58, 58, 58, 0.20) 0%, rgba(23, 23, 23, 0.82) 100%);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(212, 175, 55, 0.15);
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
    }

    .section-card:hover,
    .timeline-card:hover,
    .stat-card:hover {
      border-color: rgba(212, 175, 55, 0.35);
      transform: translateY(-4px);
      transition: all 0.3s ease;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.5rem 1rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #d4af37;
      background: rgba(212, 175, 55, 0.08);
      border: 1px solid rgba(212, 175, 55, 0.22);
    }

    .eyebrow::before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 999px;
      background: #d4af37;
      box-shadow: 0 0 16px rgba(212, 175, 55, 0.75);
    }

    .section-copy {
      color: rgba(255, 255, 255, 0.68);
      line-height: 1.85;
    }

    .metric-number {
      font-family: 'Cinzel', serif;
      font-size: 2.3rem;
      line-height: 1;
    }

    .hero-panel--gold {
      background:
        radial-gradient(circle at 16% 10%, rgba(255, 215, 0, 0.09) 0%, transparent 22%),
        radial-gradient(circle at 84% 8%, rgba(253, 185, 49, 0.06) 0%, transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(212, 175, 55, 0.05) 0%, transparent 28%),
        linear-gradient(180deg, rgba(45, 45, 45, 0.96) 0%, rgba(26, 26, 26, 0.96) 42%, rgba(16, 16, 16, 0.98) 100%);
      border: 1px solid rgba(212, 175, 55, 0.18);
      box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero-panel--gold .eyebrow {
      background: rgba(212, 175, 55, 0.08);
      border-color: rgba(212, 175, 55, 0.22);
      color: #d4af37;
      box-shadow: none;
    }

    .hero-panel--gold .section-copy {
      color: #d0d0d0;
    }

    .hero-panel--gold .stat-card--hero {
      background: linear-gradient(180deg, rgba(17, 17, 17, 0.92) 0%, rgba(7, 7, 7, 0.98) 100%);
      border: 1px solid rgba(212, 175, 55, 0.18);
      box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero-panel--gold .stat-card--hero:hover {
      border-color: rgba(255, 215, 0, 0.4);
      box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34), 0 0 28px rgba(212, 175, 55, 0.1);
    }

    .timeline-line {
      position: absolute;
      top: 1rem;
      bottom: 1rem;
      left: 1rem;
      width: 1px;
      background: linear-gradient(180deg, rgba(212, 175, 55, 0.35), rgba(212, 175, 55, 0.02));
    }

    .timeline-dot {
      width: 0.9rem;
      height: 0.9rem;
      border-radius: 999px;
      background: linear-gradient(135deg, #d4af37 0%, #f7e1ad 100%);
      box-shadow: 0 0 18px rgba(212, 175, 55, 0.42);
      flex-shrink: 0;
      margin-top: 0.35rem;
    }

    .language-modal { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; }
    .language-modal.active { display: flex; }
    .language-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); }
    .language-modal-content {
      position: relative;
      background: linear-gradient(180deg, rgba(35, 35, 35, 0.96) 0%, rgba(18, 18, 18, 0.99) 100%);
      border: 1px solid rgba(212, 175, 55, 0.3);
      border-radius: 2rem;
      width: 90%;
      max-width: 800px;
      max-height: 80vh;
      overflow-y: auto;
      padding: 2rem;
    }
    .language-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
    .lang-btn {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      color: #fff;
      padding: 0.75rem 1rem;
      border-radius: 0.75rem;
      text-align: left;
      transition: all 0.2s;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .lang-btn:hover, .lang-btn.active {
      background: rgba(212, 175, 55, 0.15);
      border-color: #d4af37;
      color: #d4af37;
    }
    .language-search {
      width: 100%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1rem;
      padding: 1rem;
      color: #fff;
      margin-bottom: 2rem;
      outline: none;
    }
    .language-buttons-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

    #mobile-menu { display: none; background: rgba(27, 27, 27, 0.98); backdrop-filter: blur(20px); border-top: 1px solid rgba(212, 175, 55, 0.15); }
    #mobile-menu.open { display: block; }