/* =========================
   DARK THEME – SGR
   ========================= */

/* =========================
   VARIABLES
   ========================= */

   html[data-theme="dark"]{
    /* Marca */
    --primary:#0A3D62;
    --accent:#48C9B0;
  
    /* Morado unificado (una sola tinta) */
    --purple:#8A5BB8;       /* base */
    --lav:#B88ED1;
  
    /* Derivados del morado */
    --violet-strong: rgba(138,91,184,.85);
    --violet-mid:    rgba(138,91,184,.28);
    --violet-soft:   rgba(138,91,184,.16);
    --violet-border: rgba(138,91,184,.22);
  
    /* UI */
    --bg:#0E1621;
    --surface:#131F2E;
    --surface2:#0B1220;
    --text:#E9ECF5;
    --muted:#A8B3C7;
    --border: rgba(72,201,176,.18);
    --shadow: 0 16px 40px rgba(0,0,0,.55);
    --ring: rgba(72,201,176,.35);
  }
  
  /* =========================
     FONDO GENERAL
     ========================= */
  
  html[data-theme="dark"] body{
    background:
      radial-gradient(900px 500px at 12% 38%, rgba(72,201,176,.20), transparent 60%),
      radial-gradient(900px 500px at 85% 48%, rgba(184,142,209,.18), transparent 60%),
      radial-gradient(900px 500px at 50% 125%, rgba(10,61,98,.25), transparent 55%),
      var(--bg);
  }
  
  /* =========================
     HEADER / NAV
     ========================= */
  
  html[data-theme="dark"] header{
    background: rgba(14,22,33,.78);
    border-bottom:1px solid var(--border);
  }
  
  html[data-theme="dark"] nav a{
    color: var(--text);
  }
  
  html[data-theme="dark"] nav a:hover{
    background: rgba(72,201,176,.18);
    color: #fff;
  }
  
  html[data-theme="dark"] .mainnav__link{
    color: var(--text);
  }
  
  html[data-theme="dark"] .mainnav__link:hover{
    background: rgba(72,201,176,.18);
    color: #fff;
  }
  
  /* =========================
     BOTONES
     ========================= */
  
  /* Secundarios */
  html[data-theme="dark"] .btn{
    background: rgba(255,255,255,.06);
    color: var(--text);
  }
  
  html[data-theme="dark"] .btn.primary{
    color:#fff;
    border: 1px solid rgba(138,91,184,.28);
  
    /* degradado morado sutil */
    background: linear-gradient(
      135deg,
      rgba(184,142,209,.18),
      rgba(184,142,209,.58)
    );
  
    /* “highlight” muy suave para dar profundidad */
    box-shadow:
      0 14px 30px rgba(138,91,184,.22),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
  
  html[data-theme="dark"] .btn.primary:hover{
    background: linear-gradient(
      135deg,
      rgba(138,91,184,.98),
      rgba(184,142,209,.68)
    );
    box-shadow:
      0 18px 36px rgba(138,91,184,.28),
      inset 0 1px 0 rgba(255,255,255,.12);
  }
  
  /* =========================
     CARDS / SERVICIOS
     ========================= */
  
  html[data-theme="dark"] .card{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.03)
    );
  }
  
  html[data-theme="dark"] .service:hover{
    border-color: rgba(72,201,176,.45);
  }
  
  html[data-theme="dark"] .service.card > h3{
    color: var(--accent);
  }
  
  /* Listas de servicios */
  html[data-theme="dark"] .service-list a{
    background: rgba(255,255,255,.04);
    border-color: rgba(72,201,176,.18);
  }
  
  html[data-theme="dark"] .service-list a:hover{
    background: rgba(72,201,176,.18);
    border-color: rgba(72,201,176,.45);
  }
  
  /* =========================
     BADGES / PÍLDORAS
     ========================= */
  
  html[data-theme="dark"] .badge{
    color: rgba(138,91,184,.95);
    background: var(--violet-soft);
    border: 1px solid var(--violet-border);
  }
  
  /* =========================
     MEGA MENU
     ========================= */
  
  html[data-theme="dark"] .mega__col{
    background: rgba(255,255,255,.04);
    border-color: rgba(72,201,176,.14);
  }
  
  /* =========================
     HERO
     ========================= */
  
  html[data-theme="dark"] .hero::before{
    background:
      /* Degradado inferior */
      linear-gradient(
        to bottom,
        rgba(14,22,33,0) 0%,
        rgba(14,22,33,0) 70%,
        rgba(14,22,33,.65) 85%,
        rgba(14,22,33,1) 100%
      ),
      /* Overlay lateral */
      linear-gradient(
        90deg,
        rgba(14,22,33,.86) 0%,
        rgba(14,22,33,.55) 55%,
        rgba(14,22,33,.18) 100%
      ),
      radial-gradient(900px 500px at 15% 15%, rgba(72,201,176,.16), transparent 60%),
      radial-gradient(900px 500px at 80% 20%, rgba(184,142,209,.16), transparent 60%);
  }
  
  /* Texto hero */
  html[data-theme="dark"] .hero .lead{
    color: rgba(233,236,245,.92);
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
  }
  
  /* =========================
     FORMULARIOS
     ========================= */
  
  html[data-theme="dark"] input,
  html[data-theme="dark"] textarea{
    background: rgba(255,255,255,.06);
    border-color: rgba(72,201,176,.20);
    box-shadow: none;
  }
  
  html[data-theme="dark"] input::placeholder,
  html[data-theme="dark"] textarea::placeholder{
    color: rgba(233,236,245,.55);
  }