/* Reusable component and interaction styles. */
/* Gradient text for emphasis words — used sparingly (1 per page) */
  .text-gradient-gold {
    background: linear-gradient(100deg, var(--c-gold-light), var(--c-gold) 60%, var(--c-gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Elevated shadow utility replacing flat browser-default shadows */
  .shadow-premium { box-shadow: var(--shadow-md); }
  .shadow-premium-lg { box-shadow: var(--shadow-lg); }

  /* Glass header state applied on scroll via JS */
  #siteHeader.glass {
    background: rgba(10,31,61,0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }

  

  /* Visible keyboard focus */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid #C9A24B;
    outline-offset: 2px;
  }

  .noscript-message {
    background: #0A1F3D;
    color: #F7F5F0;
    text-align: center;
    padding: 14px 20px;
    font-family: sans-serif;
    font-size: 14px;
  }

  .grid-texture {
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 56px 56px;
  }

  .wave-divider { height: 48px; }
  .wave-divider-top { transform: translateY(-1px); }
  .wave-divider-bottom { transform: translateY(1px) rotate(180deg); }
  .message-tail { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

  .card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

  .gold-underline { position: relative; }
  .gold-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: -10px;
    width: 56px; height: 3px;
    background: linear-gradient(90deg, var(--c-gold), var(--c-gold-light));
    border-radius: 2px;
  }

  .gold-underline.center::after { left: 50%; transform: translateX(-50%); }

  html, body { overflow-x: hidden; }

  .whatsapp-widget-shell {
    width: min(22rem, calc(100vw - 3rem));
    max-width: calc(100vw - 3rem);
    display: flex;
    flex-direction: column;
    max-height: min(38rem, calc(100dvh - 7rem));
  }
  .whatsapp-header { min-height: 76px; }
  /* The supplied square JPEG has broad built-in margins around the mark. */
  .whatsapp-logo { transform: scale(1.8); }
  .whatsapp-conversation {
    flex: 1 1 auto; min-height: 190px; overflow-y: auto; background-color: #171d20;
    background-image: radial-gradient(ellipse at 18% 23%, transparent 0 15px, rgba(255,255,255,.035) 15.5px 16px, transparent 16.5px),
      radial-gradient(ellipse at 77% 69%, transparent 0 22px, rgba(255,255,255,.03) 22.5px 23px, transparent 23.5px),
      repeating-linear-gradient(135deg, transparent 0 34px, rgba(255,255,255,.018) 35px 36px, transparent 37px 70px);
  }
  .whatsapp-composer { flex: 0 0 auto; background: #101619; }
  .whatsapp-send:disabled { color: #91a09d; background: #283331; cursor: not-allowed; }
  .whatsapp-send:not(:disabled) { color: white; background: #168b68; }
  

  .dot { width: 8px; height: 8px; border-radius: 999px; background: #D7D2C7; transition: all 0.25s ease; cursor: pointer; }
  .dot.active { background: #C9A24B; width: 24px; border-radius: 999px; }

  /* Cursor-following spotlight glow on primary CTAs */
  .btn-glow { position: relative; overflow: hidden; }
  .btn-glow::before {
    content: '';
    position: absolute;
    top: var(--my, 50%); left: var(--mx, 50%);
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .btn-glow:hover::before { opacity: 1; }

  /* Mobile nav */
  .mobile-nav { transition: max-height 0.3s ease, opacity 0.3s ease; }

  /* Canvas globe container */
  #globeCanvas { display: block; }
  #globeContainer { position: relative; touch-action: none; }
  #globeContainer canvas { display: block; width: 100% !important; height: 100% !important; }

  /* 3D tilt cards */
  .tilt-card { transform-style: preserve-3d; will-change: transform; }

  /* 3D press effect on primary buttons */
  .btn-3d { transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 4px 0 0 rgba(168,132,58,0.55); }
  .btn-3d:active { transform: translateY(3px); box-shadow: 0 1px 0 0 rgba(168,132,58,0.55); }
  .btn-3d-dark { transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 4px 0 0 rgba(5,15,30,0.6); }
  .btn-3d-dark:active { transform: translateY(3px); box-shadow: 0 1px 0 0 rgba(5,15,30,0.6); }

  /* Skip link */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #C9A24B;
    color: #0A1F3D;
    font-weight: 600;
    padding: 12px 20px;
    z-index: 100;
    border-radius: 0 0 6px 0;
  }
  .skip-link:focus {
    left: 0;
  }

  /* Header scrolled state */
  #siteHeader.scrolled { box-shadow: 0 8px 24px -8px rgba(7,21,41,0.45); }

  /* Active nav link */
  .nav-link { position: relative; }
  .nav-link.active { color: #DDBE7A; }
  .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 2px;
    background: #C9A24B;
    border-radius: 2px;
  }

  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  

  /* FAQ accordion */
  .faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
  .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
  .faq-panel-inner { overflow: hidden; }
  .faq-item.open .faq-panel { grid-template-rows: 1fr; }

  /* WhatsApp chat widget */
  #whatsappWidget { transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; }
  #whatsappWidget.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98); pointer-events: none; }
  #whatsappLauncher { animation: whatsappPulse 2.5s infinite; }
  @keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.35); }
    70% { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
  }